Flexbox-based columns system and CSS Grid implementation for creating responsive layouts with flexible sizing, alignment, and spacing options.
Flexible grid system based on Flexbox for responsive multi-column layouts.
/**
* Import flexbox columns
*/
@use 'bulma/sass/grid/columns';<!-- Basic columns -->
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
</div>
<!-- Column sizes -->
<div class="columns">
<div class="column is-half">Half width (50%)</div>
<div class="column">Auto width</div>
</div>
<div class="columns">
<div class="column is-one-third">One third (33.33%)</div>
<div class="column">Auto width</div>
</div>
<div class="columns">
<div class="column is-one-quarter">One quarter (25%)</div>
<div class="column">Auto width</div>
</div>
<!-- Fractional columns -->
<div class="columns">
<div class="column is-1">1/12</div>
<div class="column is-2">2/12</div>
<div class="column is-3">3/12</div>
<div class="column is-6">6/12</div>
</div>
<!-- Column offsets -->
<div class="columns">
<div class="column is-half is-offset-one-quarter">
Centered half-width column
</div>
</div>
<div class="columns">
<div class="column is-4 is-offset-4">
4/12 width, offset by 4/12
</div>
</div>
<!-- Column gaps -->
<div class="columns is-gapless"><!-- No gap between columns --></div>
<div class="columns is-variable is-1"><!-- Small gap --></div>
<div class="columns is-variable is-2"><!-- Medium gap --></div>
<div class="columns is-variable is-8"><!-- Large gap --></div>
<!-- Responsive columns -->
<div class="columns">
<div class="column is-half-tablet is-one-third-desktop is-one-quarter-widescreen">
Responsive column sizes
</div>
<div class="column">Auto width</div>
</div>
<!-- Mobile columns -->
<div class="columns is-mobile">
<div class="column">Mobile column 1</div>
<div class="column">Mobile column 2</div>
</div>
<!-- Desktop only columns -->
<div class="columns is-desktop">
<div class="column">Desktop column 1</div>
<div class="column">Desktop column 2</div>
</div>
<!-- Multiline columns -->
<div class="columns is-multiline">
<div class="column is-one-quarter">Column 1</div>
<div class="column is-one-quarter">Column 2</div>
<div class="column is-one-quarter">Column 3</div>
<div class="column is-one-quarter">Column 4</div>
<div class="column is-half">Column 5</div>
<div class="column is-half">Column 6</div>
</div>
<!-- Centered columns -->
<div class="columns is-centered">
<div class="column is-half">Centered column</div>
</div>
<!-- Vertically centered columns -->
<div class="columns is-vcentered">
<div class="column">
<p>Short content</p>
</div>
<div class="column">
<p>Much longer content that spans multiple lines and creates a taller column, but the other column will be vertically centered relative to this one.</p>
</div>
</div>Column Size Classes:
/* Fraction-based sizes */
.is-half /* 50% */
.is-one-third /* 33.33% */
.is-two-thirds /* 66.66% */
.is-one-quarter /* 25% */
.is-three-quarters /* 75% */
.is-one-fifth /* 20% */
.is-two-fifths /* 40% */
.is-three-fifths /* 60% */
.is-four-fifths /* 80% */
/* 12-column grid sizes */
.is-1 /* 8.33% */
.is-2 /* 16.66% */
.is-3 /* 25% */
.is-4 /* 33.33% */
.is-5 /* 41.66% */
.is-6 /* 50% */
.is-7 /* 58.33% */
.is-8 /* 66.66% */
.is-9 /* 75% */
.is-10 /* 83.33% */
.is-11 /* 91.66% */
.is-12 /* 100% */
/* Responsive suffixes */
-mobile /* up to 768px */
-tablet /* 769px and up */
-tablet-only /* 769px to 1023px */
-touch /* up to 1023px */
-desktop /* 1024px and up */
-desktop-only /* 1024px to 1215px */
-widescreen /* 1216px and up */
-widescreen-only /* 1216px to 1407px */
-fullhd /* 1408px and up */Native CSS Grid implementation for advanced grid layouts.
/**
* Import CSS Grid
*/
@use 'bulma/sass/grid/grid';<!-- Basic grid -->
<div class="grid">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
</div>
<!-- Grid with column count -->
<div class="grid has-2-cols">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
</div>
<div class="grid has-3-cols">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
<div class="grid has-4-cols">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
</div>
<!-- Grid gaps -->
<div class="grid has-3-cols has-gap-1"><!-- Small gap --></div>
<div class="grid has-3-cols has-gap-2"><!-- Medium gap --></div>
<div class="grid has-3-cols has-gap-4"><!-- Large gap --></div>
<!-- Cell spanning -->
<div class="grid has-4-cols">
<div class="cell spans-2-cols">Spans 2 columns</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell spans-3-cols">Spans 3 columns</div>
<div class="cell">Cell 5</div>
</div>
<div class="grid has-3-cols">
<div class="cell spans-2-rows">Spans 2 rows</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
<div class="cell">Cell 4</div>
<div class="cell">Cell 5</div>
</div>
<!-- Responsive grid -->
<div class="grid has-2-cols-mobile has-3-cols-tablet has-4-cols-desktop">
<div class="cell">Responsive cell 1</div>
<div class="cell">Responsive cell 2</div>
<div class="cell">Responsive cell 3</div>
<div class="cell">Responsive cell 4</div>
</div>CSS Grid Classes:
/* Grid container */
.grid {
display: grid;
grid-auto-rows: minmax(0, 1fr);
}
/* Column counts */
.has-1-cols { grid-template-columns: repeat(1, 1fr); }
.has-2-cols { grid-template-columns: repeat(2, 1fr); }
.has-3-cols { grid-template-columns: repeat(3, 1fr); }
.has-4-cols { grid-template-columns: repeat(4, 1fr); }
.has-5-cols { grid-template-columns: repeat(5, 1fr); }
.has-6-cols { grid-template-columns: repeat(6, 1fr); }
.has-7-cols { grid-template-columns: repeat(7, 1fr); }
.has-8-cols { grid-template-columns: repeat(8, 1fr); }
.has-9-cols { grid-template-columns: repeat(9, 1fr); }
.has-10-cols { grid-template-columns: repeat(10, 1fr); }
.has-11-cols { grid-template-columns: repeat(11, 1fr); }
.has-12-cols { grid-template-columns: repeat(12, 1fr); }
/* Gap sizes */
.has-gap-0 { gap: 0; }
.has-gap-1 { gap: 0.25rem; }
.has-gap-2 { gap: 0.5rem; }
.has-gap-3 { gap: 0.75rem; }
.has-gap-4 { gap: 1rem; }
.has-gap-5 { gap: 1.25rem; }
.has-gap-6 { gap: 1.5rem; }
.has-gap-7 { gap: 1.75rem; }
.has-gap-8 { gap: 2rem; }
/* Cell spanning */
.spans-2-cols { grid-column: span 2; }
.spans-3-cols { grid-column: span 3; }
.spans-4-cols { grid-column: span 4; }
.spans-5-cols { grid-column: span 5; }
.spans-6-cols { grid-column: span 6; }
.spans-2-rows { grid-row: span 2; }
.spans-3-rows { grid-row: span 3; }
.spans-4-rows { grid-row: span 4; }
.spans-5-rows { grid-row: span 5; }
.spans-6-rows { grid-row: span 6; }
/* Responsive column counts */
-mobile /* up to 768px */
-tablet /* 769px and up */
-tablet-only /* 769px to 1023px */
-desktop /* 1024px and up */
-desktop-only /* 1024px to 1215px */
-widescreen /* 1216px and up */
-widescreen-only /* 1216px to 1407px */
-fullhd /* 1408px and up */Automatic grid layout that adapts to content size.
<!-- Auto-fit grid -->
<div class="grid has-auto-cols">
<div class="cell">Auto cell 1</div>
<div class="cell">Auto cell 2</div>
<div class="cell">Auto cell 3</div>
</div>
<!-- Auto-fill grid -->
<div class="grid has-auto-fill-cols">
<div class="cell">Auto fill cell 1</div>
<div class="cell">Auto fill cell 2</div>
<div class="cell">Auto fill cell 3</div>
</div>
<!-- Minimum column width -->
<div class="grid has-min-200px-cols">
<div class="cell">Min 200px cell 1</div>
<div class="cell">Min 200px cell 2</div>
<div class="cell">Min 200px cell 3</div>
</div>Usage Examples:
// Custom grid in SCSS
.my-grid {
@extend .grid;
@extend .has-3-cols;
@extend .has-gap-4;
@media screen and (max-width: 768px) {
@extend .has-1-cols-mobile;
}
}
// Custom column sizes
.my-columns {
@extend .columns;
.main-content {
@extend .column;
@extend .is-three-quarters;
}
.sidebar {
@extend .column;
@extend .is-one-quarter;
}
}