VERSION 6.0

CSS Grid

A little about CSS grid

I Designed and Built this site on the CSS Grid Layout Module Level 1 Specification. I've been following CSS Grid for a few years. Rachel Andrew has some great information over at Grid by Example.

I have been doing web design and development for more years than I care to remember, CSS Grid is a little bit like using “HTML tables for layout”. Back in the Wild West days of web design and development, the way we constructed page layout was to use HTML tables, then cut up our design into the cells of the table. “CSS Positioning” layout enabled a separation of content and markup and presentation. CSS does not have the same issues that tables did, our grid structure is defined in CSS Grid rather than in the HTML mark-up in ways CSS Flexbox can not.

I'm not going into alot of detail about CSS Grid, this is a code snippet page for my own use, but if you find it useful then all the better.


Grid Container

Create a grid container by setting the display property with a value of grid or inline-grid. All direct children of grid containers become grid items.

display: [grid] | [inline-grid] | [subgrid];
.container {
display: grid;
}

Grid items are placed in rows by default and span the full width of the grid container.

Values:
grid - generates a block-level grid
inline-grid - generates an inline-level grid
subgrid - if your grid container is itself a grid item (i.e. nested grids), you can use this property to indicate that you want the sizes of its rows/columns to be taken from its parent rather than specifying its own.
Note: column, float, clear, and vertical-align have no effect on a grid container.

Explicit Grid

Explicitly set a grid by creating columns and rows with the grid-template-columns and grid-template-rows properties.

grid-template-columns: [track-size] | [line-name] [track-size];
grid-template-rows: [track-size] | [line-name] [track-size];
.container {
grid-template-columns: 50px 100px
grid-template-rows: 50px 100px;
}

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:
[track-size] - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
[line-name] - an arbitrary name of your choosing

Minimum and Maximum Grid Track Sizes

Tracks sizes can be defined to have a minimum and/or maximum size with the minmax() function.

minmax([minimum], [maximum])
.container {
grid-template-rows: minmax(100px, auto);
grid-template-columns: minmax(auto, 50%) 1fr 3em;
}

The minmax([minimum], [maximum]) function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size. Alongside length values, the values can also be auto, which allows the track to grow/stretch based on the size of the content.


Repeating Grid Tracks

Define repeating grid tracks using the repeat() notation. This is useful for grids with items with equal sizes or many items.

repeat([number of repetitions], [value is the grid tracks to repeat]);
.container {
grid-template-columns: 30px repeat(3, 1fr) 30px
grid-template-rows: repeat(4, 100px);
}

repeat() can also be used within track listings. In this example, the first and last column tracks have widths of 30px, and the 3 column tracks in between, created by repeat(), have widths of 1fr each.


Grid Gaps

The grid-column-gap, grid-row-gap and grid-gap properties create gutters between columns and rows. Grid gaps are only created in between columns and rows, and not along the edge of the grid container

grid-row-gap: [value]; grid-column-gap: [value]; grid-gap: [value] [value];
.container {
grid-column-gap: 10px;
grid-row-gap: 15px;
}
or
.container {
grid-gap: 10px 15px;
}

grid-gap is shorthand for grid-row-gap and grid-column-gap. If two values are specified, the first represents grid-row-gap and the second grid-column-gap.


Naming and Positioning Items by Grid Areas

Like grid line names, grid areas can also be named with the grid-template-areas property. Names can then be referenced to position grid items.

grid-template-areas: "[name] [name]" "[name] [name]" "[name] [name]";
.container {
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}

and

.grid-header {
grid-area: header;
}
.grid-content {
grid-area: content;
}
.grid-sidebar {
grid-area: sidebar;
}
.grid-footer {
grid-area: footer;
}

grid-template-areas:[name] [name]; set of names should be surrounded in single or double quotes, and each name separated by a whitespace. Each set of names defines a row, and each name defines a column.

The grid-area: [name]; shorthand property can also be used to reference grid area names.


grid-area

Gives an item a name so that it can be referenced by a template created with the grid-template-areas property. Alternatively, this property can be used as an even shorter shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end.

grid-area: [name] | [row-start] | [column-start] | [row-end] | [column-end];
.item {
grid-area: header;
}

The shorthand for grid-row-start: + grid-column-start: + grid-row-end: + grid-column-end:

Values:
[name] - a name of your choosing
[row-start] | [column-start] | [row-end] | [column-end] - can be numbers or named lines

justify-items

Aligns the content inside a grid item along the row axis (as opposed to align-items which aligns along the column axis). This value applies to all grid items inside the container.

justify-items: [start] | [end] | [center] | [stretch];
.container {
justify-items: start;
}

This behavior can also be set on individual grid items via the justify-self property.

Values:
start - aligns the content to the left end of the grid area
end - aligns the content to the right end of the grid area
center - aligns the content in the center of the grid area
stretch - fills the whole width of the grid area (this is the default)

align-items

Aligns the content inside a grid item along the column axis (as opposed to justify-items which aligns along the row axis). This value applies to all grid items inside the container.

align-items: [start] | [end] | [center] | [stretch];
.container {
align-items: start;
}

This behavior can also be set on individual grid items via the align-self property.

Values:
start - aligns the content to the top of the grid area
end - aligns the content to the bottom of the grid area
center - aligns the content in the center of the grid area
stretch - fills the whole height of the grid area (this is the default)

justify-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the row axis (as opposed to align-content which aligns the grid along the column axis).

justify-content: [start] | [end] | [center] | [stretch] | [space-around] | [space-between] | [space-evenly];
.container {
justify-content: start;
}
Values:
start - aligns the grid to the left end of the grid container
end - aligns the grid to the right end of the grid container
center - aligns the grid in the center of the grid container
stretch - resizes the grid items to allow the grid to fill the full width of the grid container
space-around - places an even amount of space between each grid item, with half-sized spaces on the far ends
space-between - places an even amount of space between each grid item, with no space at the far ends
space-evenly - places an even amount of space between each grid item, including the far ends

align-content

Sometimes the total size of your grid might be less than the size of its grid container. This could happen if all of your grid items are sized with non-flexible units like px. In this case you can set the alignment of the grid within the grid container. This property aligns the grid along the column axis (as opposed to justify-content which aligns the grid along the row axis).

align-content: [start] | [end] | [center] | [stretch] | [space-around] | [space-between] | [space-evenly]
.container {
align-content: start;
}

This behavior can also be set on individual grid items via the align-self property.

Values:
start - aligns the grid to the top of the grid container
end - aligns the grid to the bottom of the grid container
center - aligns the grid in the center of the grid container
stretch - resizes the grid items to allow the grid to fill the full height of the grid container
space-around - places an even amount of space between each grid item, with half-sized spaces on the far ends
space-between - places an even amount of space between each grid item, with no space at the far ends
space-evenly - places an even amount of space between each grid item, including the far ends
HTML 5