Grid is a stylesheet that allows editors to easily create custom layouts within a page.
Installation
Usage
Grid layouts can be helpful to get a consistent layout across the desktop and mobile versions of a page without having to use, for example, tables. It comes with 12 columns where you can place its contents by filling its columns with cells. If the sum of two or more child elements (hereafter called cells) gives a total higher than 12 columns, the exceeding cells will move into a new row below. You can't use a single cell that spans 13 or more columns. If the grid's width is less than 600px, all columns will be merged into one and each cell will be stacked on top of each other (note: this only works on modern browsers as it uses container queries).
In the following examples, the grid will have a dark gray background, while the cells inside it will have a pink background. To see each HTML element, CSS class, and CSS variable available, see the API section.
Note: In these examples, we're using some extra CSS styles for demonstration and visualization purposes. Copying the raw code shown below will not result in the grid having properties such as background and text colors.
- Example 1: 1 cell that spans all 12 columns (100%).
<div class="grid">
<div class="grid__col--span-12">Since this element spans all 12 columns, any new sibling element will be below this box/element.</div>
</div>
- Example 2: 2 cells that spans 6 out of 12 columns (50%).
<div class="grid">
<div class="grid__col--span-6">6 columns</div>
<div class="grid__col--span-6">6 columns</div>
</div>
- Example 3: 3 cells that spans 4 out of 12 columns (33.3%).
<div class="grid">
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
</div>
- Example 4: 4 cells that spans 3 out of 12 columns (25%).
<div class="grid">
<div class="grid__col--span-3">3 columns</div>
<div class="grid__col--span-3">3 columns</div>
<div class="grid__col--span-3">3 columns</div>
<div class="grid__col--span-3">3 columns</div>
</div>
- Example 5: 6 cells that spans 2 out of 12 columns (16.666...%).
<div class="grid">
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
<div class="grid__col--span-2">2 columns</div>
</div>
- Example 6: 12 cells that spans 1 out of 12 columns (8.333...%).
<div class="grid">
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
<div class="grid__col--span-1">1 column</div>
</div>
- Example 7: 2 cells. The first one takes 6 out of the 12 available columns, while the second one takes 10.
<div class="grid">
<div class="grid__col--span-6">6 columns</div>
<div class="grid__col--span-10">10 columns</div>
</div>
- Example 8: 2 cells. The first one takes 5 out of the 12 available columns, the second one takes 9, and the third one takes 4.
<div class="grid">
<div class="grid__col--span-5">5 columns</div>
<div class="grid__col--span-9">9 columns</div>
<div class="grid__col--span-4">4 columns</div>
</div>
Grid and cell alignment
This requires the grid's height to be taller than the maximum height of a row for it to work.
<div class="grid">
<div class="grid__col--span-4 grid__col--align-middle">4 columns middle</div>
<div class="grid__col--span-4 grid__col--align-top">4 columns top</div>
<div class="grid__col--span-4 grid__col--align-bottom">4 columns bottom</div>
</div>
This requires that the grid's width is less than 100% (relative to it's parent element).
<div class="grid grid--align-right" style="max-width: 500px;">
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
</div>
<div class="grid grid--align-left" style="max-width: 500px;">
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
</div>
<div class="grid grid--align-center" style="max-width: 500px;">
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
<div class="grid__col--span-4">4 columns</div>
</div>
API
HTML elements
| HTML element | Description |
|---|---|
<div class="grid"></div> |
Mandatory, for the layout grid element. |
<div class="grid__col--span-[NUMBER_OF_COLUMNS]"> |
Mandatory, for each grid cell. It has to be children of the main grid element. |
CSS classes
There are some classes to modify the behavior of the grid. Replace the text inside brackets ([]), including the brackers themselves, with any of the text in the "values" column.
| CSS class | Target | Description | Values |
|---|---|---|---|
grid |
Grid | Mandatory. Initites all grid styling rules. | - |
grid--unresponsive |
Grid | Optional. Removes responsive behavior that merges all columns into one if the grid becomes too narrow. | - |
grid__padding |
Grid | Optional. Adds a padding equivalent to the grid gap's size on all four sides (top, bottom, left, and right). | - |
grid--align-[POSITION] |
Grid | Optional. Specifies the horizontal alignment of the grid. | left, right, center
|
grid__padding--[POSITION] |
Grid | Optional. Adds a padding equivalent to the grid gap's size on a specific side. In case of using either inline or block in the class, it will add padding to the left and right or to the top and bottom of the grid respectively.
|
top, bottom, left, right, inline, block
|
grid__col--span-[NUMBER_OF_COLUMNS] |
Grid cell | Mandatory. Specifies the number of columns that the cell spans. | 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
|
grid__col--align-[POSITION] |
Grid cell | Optional. Specifies the vertical alignment of a grid cell. | top, middle, bottom
|
CSS variable
There is one variable available for this component. You can use these anywhere from the :root element all the way down to the .grid element itself.
| CSS variable | Description |
|---|---|
--grid-gap
|
Adds spacing between each grid cell (and to the padding if it's added through any of the grid__padding classes). Defaults to 16px.
|
Example:
.grid {
--grid-gap: 16px;
}