Spectrum CSS-Grid Demo

Fixed Grid Fluid Grid Nested Grids Offsets Alignment Distribution

Fixed

Fixed responsive grid.

#element1 {grid-column: 1/4;}
#element2 {grid-column: 4/6;}
#element3 {grid-column: 6/13;}

Fluid

Percent based widths allow fluid resizing of columns and rows.

Nested Grids

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>

Offsets

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;}

Alignment

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.

Start of row

#element1 {grid-column: 1/7;}

Center of row

#element1 {grid-column: 1/7;}

End of row

#element1 {grid-column: 1/7;}

Top of row

#element1 {grid-row: 1/2;}

Middle of row

#element1 {grid-row: 4/6;}

End of row

#element1 {grid-row: 6/10;}

Distribution

Distributing layout regions is also done by defining `grid-column` start and end properties.