Commentary
CSS flex box was designed for one-dimensional layout and manages content flow. This primarily allows control over spacing between elements. On the other hand, CSS grid provides two dimensional layout as well as primarily being concerned with content placement!
Goldilocks-CSS uses grid to replace flexbox for one dimensional layout which gives much greater control. With grid, you can define the minimum content width and the grid will deal with adjusting widths to meet the placement requirements. This results in eliminating the need for using @media breakpoints to ensure proper content viewing.
Rather than trying to map your layout into a fixed grid (typically 12 columns and consequently spans thereof) think of your desired minimum content width first and let grid figure how to best display it for a given viewport. This then means that you only need to think about how many columns of content you require what minimum width is needed for each column.
Usage
| Classes: | |
|---|---|
.row |
Top level class defines the grid container. |
.abs-width |
Row modifier sets minimum width to 100px width. Note: default minimum width is 5rem. |
.has-Nx-minwidth |
N = [1 - 10]; Row modifier sets children content width in increments of minimum width (default 5rem or, if set, 100px). |
.is-centered-vert |
Row modifier vertically centres column content in a row. |
.column |
Child of .row that will be spaced horizontally by the grid with gridbox column gutter as spacer. |
.is-span-N |
N = [1 - 8]; Column modifier allows a content column to span N grid columns. |
.is-fullwidth |
Optional column modifier that allows a column to grab all of the horizontal grid space. |
.has-background |
Optional column modifier that adds a background plus small padding. Usually not required for most content. |
| Dependencies: | |
|---|---|
| File: | grid.css |
| Variables: | --bg-grid, --grid-background, --grid-min-px-width, --grid-min-width, --gutter |
Examples
Basic Layout with Even columns
HTML Code Example
<div class="row">
<div class="column has-background">
<div>Component</div>
</div>
<div class="column has-background">
<div>Component</div>
</div>
<div class="column has-background">
<div>Component</div>
</div>
</div>
Even columns with Vertical Alignment
<div class="row is-centered-vert">
<div class="column has-background">
<div>Item 1</div>
</div>
<div class="column has-background">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="column has-background">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</div>
Columns with Minimum Fixed Width
Container CSS = class="row abs-width has-3x-minwidth".
Sets minimum column width to 300px and maximum width is handled by browser rendering.
<div class="row abs-width has-3x-minwidth">
<div class="column has-background">Item 1</div>
<div class="column has-background">Item 2</div>
<div class="column has-background">Item 3</div>
<div class="column has-background">Item 4</div>
<div class="column has-background">Item 5</div>
<div class="column has-background">Item 6</div>
<div class="column has-background">Item 7</div>
<div class="column has-background">Item 8</div>
<div class="column has-background">Item 9</div>
</div>
Columns with Variable Widths
Container CSS = class="row abs-width".
Column widths set to span various grid columns.
Browser rendering will ensure minimum column width and calculate maximum widths.
Columns will wrap automatically and maintain minimum column widths.
.column.is-span-1
.abs-width = 100px min width
.column.is-span-2
.abs-width = 100px x 2 cols = 200px min width
.column.is-span-3
.abs-width = 100px x 3 cols = 300px min width
<div class="row abs-width">
<div class="column is-span-1 has-background">
<p>.column.is-span-1</p>
<p>.abs-width = 100px min width</p>
</div>
<div class="column is-span-2 has-background">
<p>.column.is-span-2</p>
<p>.abs-width = 100px x 2 cols = 200px min width</p>
</div>
<div class="column is-span-3 has-background">
<p>.column.is-span-3</p>
<p>.abs-width = 100px x 3 cols = 300px min width</p>
</div>
</div>
Columns with Wider Variable Widths
Container CSS = class="row has-3x-minwidth".
Column widths set to span various grid columns.
Browser rendering will ensure minimum column width and calculate maximum widths.
Columns will wrap automatically and maintain minimum column width of 3 * 5rem.
Item 1
Item 2 + .is-span-2
rel-width = 5rem x3-min-width x 2 cols = 30rem min-width
Item 3
Rel-width = 5rem x3-min-width = 15rem min-width
Item 4
Column with a lot of text to create a wide item to show how the column gets filled out.
Item 5
Item 6
Item 7
Item 8 + .is-span-2
Rel-width = 5rem x3-min-width x 2 cols = 30rem min-width
Item 9
<div class="row has-3x-minwidth">
<div class="column has-background">
<p class="is-title-5">Item 1</p>
</div>
<div class="column is-span-2 has-background">
<p class="is-title-5">Item 2 + .is-span-2</p>
<p>rel-width = 5rem x3-min-width x 2 cols = 30rem min-width</p>
</div>
<div class="column has-background">
<p class="is-title-5">Item 3</p>
<p>Rel-width = 5rem x3-min-width = 15rem min-width</p>
</div>
<div class="column has-background">
<h5>Item 4</h5>
<p>Column with a lot of text to create a wide item to show how the column gets filled out.</p>
</div>
<div class="column has-background"><p class="is-title-5">Item 5</p></div>
<div class="column has-background"><p class="is-title-5">Item 6</p></div>
<div class="column has-background"><p class="is-title-5">Item 7</p></div>
<div class="column is-span-2 has-background">
<p class="is-title-5">Item 8 + .is-span-2</p>
<p>Rel-width = 5rem x3-min-width x 2 cols = 30rem min-width</p>
</div>
<div class="column has-background"><p class="is-title-5">Item 9</p></div>
</div>