Beware, that in following examples
styles are applied to all grid cells, unless stated otherwise.
.f-grid-gap-1 is used in most of the examples.
Grid (parent)
.f-grid
Define element as grid container.
Cell size in grid is resolved differently if:
- there is only one row, cell size is defined by a fraction (similar to percents of grid)
- cells start wrapping to second row, once number of columns multiplied by $minimal-column-width is higher than container's width.
Behavior 1. can be avoided by appling class f-grid-solid or f-grid-solid-N
.f-container
Used on parent of f-grid-N or f-grid-N-M
.f-grid-N
By adding f-grid-N to f-grid, it limits number of columns in grid to N
Must be wrapped into f-container
N is number from 2 to $max-colspan
This class ensures that columns behaves like fractions rather than optimal sized ones, once grid is wider than N * $minimal-column-width. Once the grid becomes smaller then N, it starts behaving like regular grid
It does not work together with f-grid-solid!
.f-grid-N-M
By adding f-grid-N-M to f-grid, it limits number of columns in grid to N but only when there are between N and M potential columns.
M is number from 2 to $max-colspan
N must be smaller than M
Must be wrapped into f-container
It does not work together with f-grid-solid!
.f-grid-dense
Adds grid-auto-flow: dense; It tries to fill empty gaps in the grid with out of order elements.
With f-grid-dense:
Without f-grid-dense:
.f-grid-solid
Uses repeat(auto-fill, ... instead of repeat(auto-fit, ....
If used and content of grid does not fill all potential cols, the content won't stretch into the unused space.
Unfortunately, if a grid with potential 12 columns is filled with many .f-col-5's, two right columns will be empty.
With f-grid-solid:
Without f-grid-solid:
.f-grid-solid-N
Can be used on grid containing only identical f-col-N cells
N is number from 2 to $max-colspan
As shown above, the f-grid-solid works well as long as the columns won't fill the grid. Once the cells overflow to next "row" the f-grid-solid can leave empty column(s) at the end.
In order to get best of both worlds
- proportionally split remaining space between occupied columns, but
- to do it only when there is more than one row,
there is f-grid-solid-N.
This cannot be done by CSS grid syntax, but rather by good old margins.
It would require insanely huge amount css selectors to cover all possible combinations.
To limit the selectors to reasonable amount it only covers scenarios where all cells has same width
f-col-n.
.f-grid-N-collapse
Tells when children of the container collapse to full width. f-grid-n-collapse collapse when container is smaller than (N + 1) * $minimal-column-width.
N is number from 2 to $max-colspan
with f-grid-4-collapse:
.f-grid-gap-N
Set the gap between elements of column. Default is 0
| f-grid-gap-05 | Half of common gap |
| f-grid-gap-1 | Common gap |
| f-grid-gap-2 | Double the common gap |
| f-grid-gap-3 | Triple the common gap |
Gaps can differ across nested grids
Cell (children)
.f-col-N
Defines element as grid's cell, which spans across N columns
N is number from 2 to $max-colspan
If there are not enough elements to fill the first row, cells will consume all remaining space evenly. This can be used for creation of layouts.
See two following examples, to understand a layout usage of fluid grid. The only difference is the point, when columns start collapsing one below another.
.f-col-max
Defines element as grid's cell, which spans across all avaiable columns
It can happen, that the f-col-max creates new (empty) columns, which would not be defined otherwise. Be smart when using this class, as it can lead to weird result.
.f-row-N
Defines element as grid's cell, which spans across N rows
N is number from 2 to $max-rowspan
.f-row-N-M
Tells how many rows the element will take between N and M grid size (column count)
M is number from 2 to $max-colspan
N is number from 1 to $max-rowspan
.f-col-N@M
Defines how many columns the element will take N at specific grid size (column count) M
M is number from 2 to $max-colspan
N is number from 1 to $max-rowspan
N must be always smaller than M
See below: When there are M (4) columns in the grid, the cell only takes N (2)
.f-col-N-M
Defines how many columns the element will take N,when grid size (column count) is between N and M
M is number from 2 to $max-colspan
N must be always smaller than M
See below: When there are between 2-5 columns in the grid, the cell only takes N (2)
.f-col-N-collapse
At what container size N or smaller, the cell itself should collapse to full width.
Max N is defined during build time of the grid
Nested grids
Grids can be nested "infinitely"
If you don't use Gaps with combination with backgrounds on cells you can define f-grid on f-col-N directly:
With background-clip: content-box;
Without background-clip: content-box;
If you need backgrounds on cells (Grid with gaps and without background-clip), you can nest f-grid into an f-col-N
With background-clip: content-box;
Without background-clip: content-box;
Tips and Drawbacks
Gaps and Backgrounds
Beware that there are several issues when combining f-grid-gap-N on grid and cell with background-color. See examples in section below and above.
If you need various backgrounds to be used on different cells, and you can afford not using f-grid-gap-N, it is probably the most straightforward way. You can then apply padding by nested elements of the grid cells. Otherwise see the tricks...
The Gap
By default gap between cels is set to 0. But gap can be set by f-grid-gap-N class.
The Fluid grid does not use CSS gap property. The reasons are:
- poor support for cell backgrounds. (One can not add background to cells including the gap itself)
- Container queries would need to be defined for each gap option, so the generated CSS code would be many times bigger if real grid gp is used
As it is a common requirement to have a grid based layout with differently colored backgrounds of different cells, and mostly the gaps should not be white :), the only way is to use old fashioned negative margin for grid and positive padding for cells to compensate it.
You can use grid without gaps and used extra nested elements for spacings and background. It would just require additional HTML markup which is mostly not desired
Background-clip
Because negative margin / positive padding technique is used in Fluid grid, background applied to cell also covers half of gap width around. In this way you can add different backgrounds to different cells while avoiding the gaps being white.
If you wish a background not to cover gaps (as you can see in examples all around) you need to apply following style to cells:
With background-clip: content-box on cells:
(Default) Without background-clip: content-box on cells:
Grid wrappers (for background handling of grids with gaps)
.f-grid-wrap-overflow
By adding this class to a wrapper of the f-grid element,
is applied to the wrapper. This fixes potential issues with backgrounds applied to f-grid elements with f-grid-gap-N
With f-grid-wrap-overflow (bg on grid itself):
Without f-grid-wrap-overflow (bg on grid itself):
Beware that this overflow has impact on relatively/abolutely positioned elements inside the grid. They (tooltips etc.) cannot be positined outisde of borders of the grid
.f-grid-wrap-fix
By adding this class to a wrapper of the f-grid element, following style is applied:
It fixes potential issues with backgrounds applied to wrapper of f-grid element when f-grid-gap-N is used on the grid
You won't need this fix in case your wrapper already has top and bottom paddings.
This is kind of hack used to mitigate a css "bug".
Issue is, that if element with negative margin top/bottom is wrapped to another elmement. The wrapper's height is increased by the negative margin, unless the wrapper has applied top/mottom padding on it.