Grid
Create a responsive column layout
Grid
Go to top
Also see /react/grid
React component
The .bfl-grid class applies a CSS
Grid with a single
column, and 12px gap between rows.
HTML
<div class="bfl-grid">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>Columns
You can configure number of columns (default 1) through the --bfl-columns
custom property.
Two columns for all screens
Inline style
HTML
<div class="bfl-grid" style="--bfl-columns: 2">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>CSS selector
HTML
<style>
.my-grid {
--bfl-columns: 2;
}
</style>
<div class="bfl-grid my-grid">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>One column up to 600px, three for wider
HTML
<style>
@media (min-width: 600px) {
.my-grid-one {
--bfl-columns: 3;
}
}
</style>
<div class="bfl-grid my-grid-one">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>Two columns up to 960px, four for wider
HTML
<style>
.my-grid-two {
--bfl-columns: 2;
}
@media (min-width: 960px) {
.my-grid-two {
--bfl-columns: 4;
}
}
</style>
<div class="bfl-grid my-grid-two">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>Span columns
You can use grid-column: span [number] to span multiple columns.
HTML
<style>
@media (min-width: 600px) {
.my-grid-three {
--bfl-columns: 3;
}
.my-wide-element {
grid-column: span 2;
}
}
</style>
<div class="bfl-grid my-grid-three">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="my-wide-element bfc-base-3-bg bf-padding">
This content spans two columns for 600px screens and wider
</div>
</div>Span rows
You can use grid-row: span [number] to span multiple rows, depending on the
order of the elements in the DOM.
HTML
<style>
@media (min-width: 600px) {
.my-grid-four {
--bfl-columns: 2;
}
.my-tall-element {
grid-row: span 2;
}
}
</style>
<div class="bfl-grid my-grid-four">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="my-tall-element bfc-base-3-bg bf-padding">
This content spans two rows for 600px screens and wider
</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>Custom gap
You can configure the gap spacing (default 12px) through the --bfl-gap
custom property.
HTML
<div class="bfl-grid" style="--bfl-gap: 40px">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
</div>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.
HTML
<style>
@media (min-width: 600px) {
.my-grid-five {
--bfl-columns: 2;
}
.my-tall-element-two {
/* place at grid row line 1 (top) and span all the way to grid line 4 (bottom) */
grid-row: 1 / 4;
/* place at grid column line 2 (center) */
grid-column: 2;
}
}
</style>
<div class="bfl-grid my-grid-five">
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="bfc-base-3-bg bf-padding">Element</div>
<div class="my-tall-element-two bfc-base-3-bg bf-padding">
For 600px+ this content spans three rows, and is placed as last element in
the DOM. For mobile screens it will appear at the bottom.
</div>
</div>Sandbox
Copy/paste code from examples above, and tinker with the code to see the results yourself :)
<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css"> <link rel="stylesheet" href="styles.css"> <div class="bfl-grid my-grid bf-page-padding"> <div class="bfc-base-3-bg bf-padding">Element</div> <div class="my-wide-element bfc-base-3-bg bf-padding"> This content spans two columns for 600px screens and wider </div> </div>