FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit A Complete Guide to Flexbox. A basic grid is defined by giving + a container p-grid class and children the p-col class. Children of the grid will have the same width and scale according to the width of the parent.
+Default direction is row and p-dir-* class at the container defines the other possible directions which can be row reverse, column and column reverse
+FlexGrid includes a 12 column based layout utility where width of a column is defined with the p-col-{number} style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.
+ +In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.
+When the number of columns exceed 12, columns wrap to a new line.
+A column can have a fixed width while siblings having auto width. Apply p-col-fixed class to fix a column width.
+Responsive layout is achieved by applying breakpoint specific classes to the columns whereas p-col-* define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.
+| Prefix | +Devices | +Media Query | +Example | +
|---|---|---|---|
| p-sm-* | +Small devices | +min-width: 576px | +p-sm-6, p-sm-4 | +
| p-md-* | +Medium sized devices such as tablets | +min-width: 768px | +p-md-2, p-md-8 | +
| p-lg-* | +Devices with large screen like desktops | +min-width: 992px | +p-lg-6, p-lg-12 | +
| p-xl-* | +Big screen monitors | +min-width: 1200px | +p-xl-2, ui-xl-10 | +
In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.
+p-justify-* classes are used on the container element to define the alignment along the main axis.
+| Class | +Description | +
|---|---|
| p-justify-start (default) | +Items are packed toward the start line | +
| p-justify-end | +Items are packed toward to end line | +
| p-justify-center | +Items are centered along the line | +
| p-justify-between | +Items are evenly distributed in the line; first item is on the start line, last item on the end line | +
| p-justify-around | +Items are evenly distributed in the line with equal space around them. | +
| p-justify-even | +Items are distributed so that the spacing between any two items (and the space to the edges) is equal. | +
p-align-* classes are used on the container element to define the alignment along the cross axis.
+| Class | +Description | +
|---|---|
| p-align-stretch (default) | +Stretch to fill the container. | +
| p-align-start | +Cross-start margin edge of the items is placed on the cross-start line | +
| p-align-end | +Cross-end margin edge of the items is placed on the cross-end line | +
| p-align-center | +Items are centered in the cross-axis | +
| p-align-baseline | +Items are aligned such as their baselines align | +
Vertical alignment can also be defined at column level with the p-align-col-* classes.
+| Class | +Description | +
|---|---|
| p-col-align-stretch | +Stretch to fill the container. | +
| p-col-align-start | +Cross-start margin edge of the items is placed on the cross-start line | +
| p-col-align-end | +Cross-end margin edge of the items is placed on the cross-end line | +
| p-col-align-center | +Items are centered in the cross-axis | +
| p-col-align-baseline | +Items are aligned such as their baselines align | +
Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.
+The list of offset classes varying within a range of 1 to 12.
+| Prefix | +Devices | +Media Query | +Example | +
|---|---|---|---|
| p-col-offset-* | +All devices | +All screens | +p-col-offset-6, p-col-offset-4 | +
| p-sm-offset-* | +Small devices | +min-width: 576px | +p-sm-offset-6, p-sm-offset-4 | +
| p-md-offset-* | +Medium sized devices such as tablets | +min-width: 768px | +p-md-offset-6, p-md-offset-4 | +
| p-lg-offset-* | +Devices with large screen like desktops | +min-width: 992px | +p-lg-offset-6, p-lg-offset-4 | +
| p-xl-offset-* | +Big screen monitors | +min-width: 1200px | +p-xl-offset-6, p-xl-offset-4 | +
Columns can be nested to create more complex layouts.
+A .5 em padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply + p-nogutter class to the container. Gutters can also be removed on an ndividual columns with the same class name. +
+PrimeFlex allows customization of breakpoints and gutters via SASS variables, visit the PrimeFlex repository to get access to the primeflex.scss file to build your own customized Grid.
+ +