+
+
+
+
+ InputText
+Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops. + Flex Grid CSS is not included in PrimeReact as it is provided by PrimeFlex, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.
+
+
+ Basic
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+ Dynamic
+
+
+
+
+
+
+
+ {{col}}
+ Reverse Direction
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+ Column Direction
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+ Reverse Column Direction
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+ 12 Column Grid
+
+
+
+
+
+ 4
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+ 1
+
+
+
+
+
+ 2
+
+
+ 6
+
+
+ 4
+
+
+
+
+
+ 8
+
+
+ 2
+
+
+ 2
+ MultiLine
+
+
+
+
+
+ 6
+
+
+ 6
+
+
+ 6
+
+
+ 6
+ Fixed Width Column
+
+
+
+
+
+ 100px
+
+
+ auto
+ Responsive
+
+
+
+
+
+ p-col-12 p-md-6 p-lg-3
+
+
+ p-col-12 p-md-6 p-lg-3
+
+
+ p-col-12 p-md-6 p-lg-3
+
+
+ p-col-12 p-md-6 p-lg-3
+ Horizontal Alignment - Start
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Horizontal Alignment - End
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Horizontal Alignment - Center
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Horizontal Alignment - Between
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Horizontal Alignment - Around
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Horizontal Alignment - Even
+
+
+
+
+
+ 2
+
+
+ 1
+
+
+ 4
+ Vertical Alignment - Start
+
+
+
+
+
+ 4
+
+
+ 4
+
+
+ 4
+ Vertical Alignment - End
+
+
+
+
+
+ 4
+
+
+ 4
+
+
+ 4
+ Vertical Alignment - Center
+
+
+
+
+
+ 4
+
+
+ 4
+
+
+ 4
+ Vertical Alignment - Stretch
+
+
+
+
+
+ 4
+
+
+ 4
+
+
+ 4
+ Vertical Alignment - Per Column
+
+
+
+
+
+ 4
+
+
+ 4
+
+
+ 4
+ Offset
+
+
+
+
+
+ 6
+
+
+
+
+
+ 4
+
+
+ 4
+ Nested
+
+
+
+
+
+
+
+
+
+ 6
+
+
+ 6
+
+
+ 12
+
+
+ 4
+ Panels
+
+
+
+
+
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+ His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+ Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+ kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+
+
+
+
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+ His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+ Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+ kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+
+
+
+
+ The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+ His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+ Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+ kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+
+
+ Sample Layout
+
+
+
+ Menu
+
+
+
+
+ Top Bar
+
+
+
+
+ 
+ 
+ 
+ 
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
+ dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
+ In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante
+ Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
+ tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
+ at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
+ nulla nec, rutrum sapien.
+ Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
+ sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
+ Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
+ condimentum eget hendrerit sit amet.
+
+ Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
+ facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
+ neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.
+ Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
+ ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
+ pretium leo et egestas luctus. Nunc facilisis gravida tellus.
+
+ Footer
+
+