A starter kit for CSS Grid Layout.

SUB-544 • TINY
544 • SMALL
768 • MEDIUM
1012 • LARGE
1280 • X-LARGE

Basic grid | .block

1
2
3
4
5
6
7
8
9
10
11
12

Flush grid (No grid gap) | .block + .block--flush

1
2
3
4
5
6
7
8
9
10
11
12

Maintain the grid columns in mobile views | .block + .block--mobile

1
2
3
4

Hide elements in mobile views | .shim

2 COLUMNS, HIDDEN ON MOBILE
6 COLUMNS
4 COLUMNS

Design pattern utility:

This block is centered on the page, spanning 8 columns (offset by 2 on each side). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tincidunt est id fringilla. .pattern__2-8-2

Another design pattern utility: this block is centered on the page, spanning 6 columns (offset by 3 on each side). .pattern__3-6-3

Nested 3
Nested 3
Nested 3
Nested 3

Full-width block | .block + .block--wide

Nested grid in a standard block

(Uses pattern__3-6-3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tincidunt est id fringilla. In convallis commodo sem. Quisque ultricies purus et fermentum blandit. Pellentesque pellentesque est non ligula malesuada sodales. Aliquam auctor dui leo, sit amet ultrices lectus tempus euismod. Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin dignissim at orci non vulputate.

STACKS ON STACKS

A bunch of columns in a block that auto-wrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4-column block, reverse order on mobile

1
2
3
4

3-column block with centered elements

Center Vertical
Center Horizontal
Center Both

2-column block

1
2