Grid parts

Grid Container

Grid Item

Grid Line

Grid Track

Grid Cell

Grid Area

Container properties

display

.container {
  display: grid | inline-grid;
}

Note: column, float, clear, and vertical-align have no effect on a grid container.

grid - generates a block-level grid

inline-grid - generates an inline-level grid

grid-template-columns
grid-template-rows

<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

grid-template-columns
grid-template-rows

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Note that a line can have more than one name.

grid-template-areas

<grid-area-name> - the name of a grid area specified with grid-area

. - a period signifies an empty grid cell

none - no grid areas are defined

.container {
  grid-template-areas: 
    "<grid-area-name> | . | none | ..."
    "...";
}

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

grid-template

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

.container {
  grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}

values

none - sets all three properties to their initial values

subgrid - sets grid-template-rows and grid-template-columns to subgrid, and grid-template-areas to its initial value

<grid-template-rows> / <grid-template-columns> - sets grid-template-columns and grid-template-rows to the specified values, respectively, and sets grid-template-areas to none

grid-column-gap
grid-row-gap

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

Specifies the size of the grid lines. You can think of it like setting the width of the gutters between the columns/rows.

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

grid-gap

.container{
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 10px 15px;
}

<grid-row-gap> <grid-column-gap> - length values

justify-items

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

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.

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)

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

align-items

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

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.

Note: Values are the same as justify-items

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

justify-content

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

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).

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

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;	
}

.container {
  justify-content: space-between;	
}

.container {
  justify-content: space-evenly;	
}

align-content

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).

Note: Values are the same as justify-content

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

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;	
}

.container {
  align-content: space-between;	
}

.container {
  align-content: space-evenly;	
}

grid-auto-columns
grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit grid tracks get created when you explicitly position rows or columns (via grid-template-rows/grid-template-columns) that are out of range of the defined grid.

grid-auto-columns
grid-auto-rows

<track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

.container {
  grid-auto-columns: 60px;
}

grid-auto-flow

.container {
  grid-auto-flow: row | column | row dense | column dense
}

If you have grid items that you don't explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items. This property controls how the auto-placement algorithm works.

values

row - tells the auto-placement algorithm to fill in each row in turn, adding new rows as necessary

column - tells the auto-placement algorithm to fill in each column in turn, adding new columns as necessary

dense - tells the auto-placement algorithm to attempt to fill in holes earlier in the grid if smaller items come up later

Note that dense might cause your items to appear out of order.

grid

A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It also sets grid-column-gap and grid-row-gap to their initial values, even though they can't be explicitly set by this property.

values

none - sets all sub-properties to their initial values

<grid-template-rows> / <grid-template-columns> - sets grid-template-rows and grid-template-columns to the specified values, respectively, and all other sub-properties to their initial values

<grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] - accepts all the same values as grid-auto-flow, grid-auto-rows and grid-auto-columns, respectively. If grid-auto-columns is omitted, it is set to the value specified for grid-auto-rows. If both are omitted, they are set to their initial values

Item properties

grid-column-start
grid-column-end
grid-row-start
grid-row-end

values

<line> - can be a number to refer to a numbered grid line, or a name to refer to a named grid line

span <number> - the item will span across the provided number of grid tracks

span <name> - the item will span across until it hits the next line with the provided name

auto - indicates auto-placement, an automatic span, or a default span of one

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2
  grid-row-end: span 2
}

grid-column

grid-row

Shorthand for grid-column-start + grid-column-end, and grid-row-start + grid-row-end, respectively.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

values

<start-line> / <end-line> - each one accepts all the same values as the longhand version, including span

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-area
justify-self
align-self

RWD?
RWD!