Flexgrid
@@adsense
Metro UI CSS includes a responsive flex grid system that appropriately scales up to 12 fixed columns and no limit non-fixed columns. It includes predefined classes for easy layout options.
1
1
1
1
1
1
1
1
1
1
1
1
8
4
4
4
4
2
2
2
2
2
2
Default cell fixed size
1
2
3
4
5
Cell size auto
1
2
3
4
5
Justify start
1
2
3
Justify center
1
2
3
Justify end
1
2
3
Justify space around
1
2
3
Justify space between
1
2
3
Introduction
Grid systems are used to create page layouts through a series of rows and columns that house your content. Here's how the grid system works:
- Rows must be placed within a .flex-grid container
- Use rows to create horizontal groups of columns (container with class .row).
- Content should be placed within columns (container with class .cell).
- Default row no contain cells
- Cells can extended and take the place of multiple cells using the classes .colspan2 or .size2 ... .colspan12 or size12
- Cells can extended and take the place of any sizes using the classes: for percent size set - .size-p10 ... .size-p100 with step 10
- Cells can extended and take the place of any sizes using the classes: for pixels size set - .size-x100 ... .size-x1000 with step 100
- To set automatic size of all columns in row you can add class cell-auto-size to row.
- To set automatic size to any columns in row you can add class auto-size to cell.
-
To change the distribution of cells you can use the built-in classes:
- flex-dir-row
- flex-dir-row-reverse
- flex-dir-column
- flex-dir-column-reverse
- flex-wrap
- flex-wrap-reverse
- flex-no-wrap
- flex-just-start
- flex-just-end
- flex-just-center
- flex-just-sa (space around)
- flex-just-sb (space between)
- flex-align-stretch
- flex-align-start
- flex-align-end
- flex-align-center
- flex-align-base
- flex-content-stretch
- flex-content-start
- flex-content-end
- flex-content-center
- flex-content-sb
- flex-content-sa
- flex-self-auto
- flex-self-start
- flex-self-end
- flex-self-center
- flex-self-base
- flex-self-stretch
- no-shrink
- no-grow