Content grid

Grid logic #

The content grid defines named grid areas that can be used to position child content at consistent, predefined containers.

The content-grid structure
|--|--|--|-|---------|-|--|--|--|
The grid areas
|--|--|--|-|###(1)###|-|--|--|--|
|--|--|--|#####(2)#####|--|--|--|
|--|--|########(3)########|--|--|
|--|###########(4)###########|--|
|##############(5)##############|

1. The content column is centered and limited in width by var(--content-max-width).
2. The popout column is centered wider than the content column. It is used to emphasize content like images or video. The popout column is limited in width by var(--popout-max-width).
3. The wrapper width is the same as the .wrapper utility and the column width is limited in by var(--wrapper-max-width)
4. The extend width is the same as the .extend utility and the column width is limited in by var(--extend-max-width)
5. The width of the full-width grid area is the same as the .wrapper utility and the column width is limited in by var(--wrapper-max-width)

By default, content is always sorted in the ‘content’ grid area. The CSS classes ‘popout’, ‘wrapper’, ‘extend’ and ‘full-width’ can be used to assign a element to a different grid area.

Grid sizes #

CSS classes can be used to place elements within the grid.

<div class="content-grid">
	<div class="wrapper">Place into the grid area ‘wrapper’</div>
</div>

Extend to one size #

Elements within the grid can break out of the grid to one side.

<div class="content-grid">
	<div class="wrapper-right-only">Extend the element on the right side to the grid line ‘wrapper-end’</div>
</div>

Content split #

The grid can be split in the middle to align elements to the right and left of the centre line.

<div class="content-grid">
	<div class="full-width-content-split">
		<div>Left side</div>
		<div>Right side</div>
	</div>
</div>