PLAY CSS
jaen

Layout · Overview

Grid layout

The properties used with display: grid, grouped by role. Some go on the box and draw the column and row lines, take gaps, or align; others go on the items inside and decide where each one sits.

Try them together

The grid blocks are already stacked. Move the values, add or remove blocks, and see how they work together. Properties written for an item apply to the outlined second item.

Preview

1234
Sample
Items
Drag the bottom-right corner to resize

Code

.box {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 8px;
}

.box > :nth-child(2) {
  grid-column: span 2;
}

Blocks3

  1. grid-template-columnsrepeat(3, 1fr)
    grid-template-columns
    repeat() count3
    Tracks (column or row sizes)
    Track 1
    minmax()
    Open its page
1234

Properties

Make columns and rowsOn the box

Draw the column and row lines and size the cells. These also size the rows (or columns) added when there are more items than you wrote, and set which way items fill in.

1234

grid-template-columns

grid-template-columns: 60px 1fr 2fr;

grid-template-columns sets how many columns a grid container has and how wide each one is. Write the column sizes (tracks) in order, separated by spaces.

1234

grid-template-rows

grid-template-rows: 1fr 2fr;

grid-template-rows sets how many rows a grid container has and how tall each one is. It works like grid-template-columns: write the row sizes (tracks) from top to bottom.

1234

grid-auto-rows

grid-auto-rows: 40px 1fr;

grid-auto-rows sets the height of rows that grid-template-rows does not set, that is, the rows added automatically to fit the items.

1234

grid-auto-columns

grid-auto-columns: 40px 1fr;

grid-auto-columns sets the width of columns that grid-template-columns does not set, that is, the columns added automatically to fit the items.

1234

grid-auto-flow

grid-auto-flow: row dense;

grid-auto-flow sets whether grid items without a set position are placed along the rows or down the columns, and whether earlier empty cells get filled in.

Add gapsOn the box

Space between columns and between rows. Nothing is added at the edges.

1234

gap

gap: 16px 8px;

gap sets the space between rows (row-gap) and between columns (column-gap) of items in a flexbox, grid or multi-column layout.

AlignOn the box

-items places each item inside its cell; -content places the whole set of tracks inside the box. justify works along the row (horizontal), align across it (vertical), and place sets both at once.

1234

justify-items

justify-items: center;

justify-items sets where grid items sit inside their cells along the inline axis (left to right in horizontal text), for all items at once.

1234

align-items

align-items: center;

align-items sets where items in a flexbox or grid line up along the cross axis (across the direction they run in). In a flexbox running across, that is the vertical alignment.

1234

place-items

place-items: center;

place-items is a shorthand for align-items (vertical position) and justify-items (horizontal position). place-items: center puts grid items in the middle of their cells both ways.

1234

justify-content

justify-content: space-between;

justify-content sets where items in a flexbox or grid sit along the main axis (the direction they run in) and how leftover space is shared.

1234

align-content

align-content: center;

align-content sets where the wrapped lines of a flexbox, or the rows of a grid, sit as a group along the cross axis (vertically when items run across) and how leftover space is shared.

1234

place-content

place-content: center;

place-content is a shorthand for align-content (vertical position of the rows as a group) and justify-content (horizontal position of the columns as a group). It decides where the content as a whole goes in the space left over in the box.

Place itemsOn an item

Name the lines an item starts and ends on to put it in any cell or span several cells. grid-area writes all four row and column lines at once. order changes the sequence items are placed in automatically.

1234

grid-column

grid-column: span 2;

grid-column goes on a grid item and sets which columns it sits in and how many columns it spans. It is a shorthand for grid-column-start and grid-column-end.

1234

grid-row

grid-row: span 2;

grid-row goes on a grid item and sets which rows it sits in and how many rows it spans. It is a shorthand for grid-row-start and grid-row-end.

1234

grid-area

grid-area: 1 / 2 / 3 / 4;

grid-area goes on a grid item and sets the rows and columns it sits in at once. It is a shorthand for grid-row-start, grid-column-start, grid-row-end and grid-column-end.

1234

order

order: -1;

order goes on a flex or grid item and changes the order the items are laid out in, away from their order in the HTML.

Align one itemOn an item

Override the box's -items alignment for a single item.

1234

justify-self

justify-self: center;

justify-self goes on a single grid item and sets where that item sits inside its cell along the inline axis (left to right in horizontal text). It overrides the justify-items of the container for that item.

1234

align-self

align-self: center;

align-self goes on a single flex or grid item and gives it a different position on the cross axis (vertical, for a row) from the align-items of its container.

1234

place-self

place-self: center;

place-self is a shorthand for align-self (vertical position) and justify-self (horizontal position). It goes on a single grid item and moves just that item inside its cell.

PLAY CSS