Fixed responsive grid.
#element1 {grid-column: 1/4;}
#element2 {grid-column: 4/6;}
#element3 {grid-column: 6/13;}
Percent based widths allow fluid resizing of columns and rows.
You can nest as many layers deep as you'd like. The only requirement of a nested grid is that it's immediate parent is also a grid.
All you need to do is define a `--columns` custom property and a `grid-column-start` on the nested grid.
If you don't define either, the nested grid will default to 12 columns at the full width.
.nested-grid1 {
--columns: 9;
grid-column-start: 1;
}
.nested-grid2 {
--columns: 9;
grid-column-start: 1;
}
<main class="spectrum-grid">
<div class="spectrum-grid spectrum-grid--nested nested-grid1">
<div></div>
<div></div>
<div></div>
</div>
<div class="spectrum-grid spectrum-grid--nested nested-grid2">
<div></div>
<div></div>
</div>
</main>
Offsetting placement of layout region. Simply define the `grid-column-start` property with the column you want the layout region to begin.
#element1 {grid-column: 10/13;}
Align elements to the start or end of a row as well as the top, bottom, or center of a column.
Row alignments are done by specifying `grid-column-start` and `grid-column-end` properties. Column alignment is specified by the `grid-row` property.
#element1 {grid-column: 1/7;}
#element1 {grid-column: 1/7;}
#element1 {grid-column: 1/7;}
#element1 {grid-row: 1/2;}
#element1 {grid-row: 4/6;}
#element1 {grid-row: 6/10;}
Distributing layout regions is also done by defining `grid-column` start and end properties.