Grid
Create a responsive column layout
The .bfl-grid class applies a CSS
Grid with a single
column, and 12px gap between rows.
Columns
You can configure number of columns (default 1) through the --bfl-columns
custom property.
Two columns for all screens
Inline style
CSS selector
One column up to 600px, three for wider
Two columns up to 960px, four for wider
Span columns
You can use grid-column: span [number] to span multiple columns.
Span rows
You can use grid-row: span [number] to span multiple rows, depending on the
order of the elements in the DOM.
Custom gap
You can configure the gap spacing (default 12px) through the --bfl-gap
custom property.
Custom positioning
If re-arranging the DOM structure isn't feasible you can combine grid-row and
grid-column to place an element anywhere you want. All other elements will be
placed in other unoccupied areas of the grid by default.
Read more about css grid terminology.
Combined gap and column span
Gap and column span can be combined together.