current theme: placeholder

CSS Grid Tutorial: Interactive Guide and Examples

Published on

Interactive CSS grid playground

4 Rows
4 Columns
3 Grid Items
  • One
  • Two
  • Three
Copied!
.grid {
  display: grid;
  gap: 20px;
  height: 300px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

CSS Grid can be daunting at first, and if you don’t use it every day, it’s easy to forget the exact syntax. That’s why I built this interactive playground.

Grid features

  • Rows: add/remove/resize
  • Columns: add/remove/resize
  • Grid items: add, remove, reorder, resize, and select (to set justify-self / align-self)
  • Tracks: right-click within a track to reset a row or column to 1fr
  • Reset: the top-right button resets everything to the default state
  • Resize: bottom right lets you resize grid dimensions

Settings

  • Change CSS properties such as justify-items, align-items, etc.
  • Grid-item properties are only available when a grid item is selected.

Code block

Any changes you make to the grid are reflected instantly in the code block below. Don’t miss the options there. You can:

  • Toggle shorthand syntax
  • Use template areas syntax

A Complete Guide to CSS Grid

Before diving into Grid itself, it’s important to understand the terminology. Many of these terms are conceptually similar, so it’s easy to mix them up if you don’t first learn how the specification defines them. Fortunately, there aren’t many.

Grid container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

Grid item

The children (i.e. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid line

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the blue line is an example of a column grid line.

Grid track

The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s the grid track between the second and third row grid lines.

Grid cell

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid area

The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Properties for the Parent (Grid Container)

display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

  • grid - generates a block-level grid
  • inline-grid - generates an inline-level grid
.container {
  display: grid | inline-grid;
}

CSS Grid Level 2 adds subgrid as a value for grid-template-columns and grid-template-rows. When a grid item is itself a grid container, subgrid makes it inherit — and align with — the parent grid’s track sizes rather than creating independent tracks:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}


.subgrid {
  grid-column: 1 / 4; /* spans all three parent columns */
  display: grid;
  grid-template-columns: subgrid; /* re-uses the parent's three tracks */
}

This makes it straightforward to keep content inside nested components aligned to the same grid as the outer layout. subgrid is supported in all major browsers:

Baseline Widely available
Subgrid Usage: 92% MDN
Chrome since 117 Sep 2023
Edge since 117 Sep 2023
Firefox since 71 Dec 2019
Safari since 16 Sep 2022
iOS Safari since 16 Sep 2022
Android since 117

grid-template-columns / grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent track sizes, and the lines between those tracks are the grid lines.

Values:

  • <track-size> - can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit), or a keyword: auto, min-content, max-content. You can also use minmax(min, max) to set a minimum and maximum size, or fit-content(value) to clamp the track at a given value while still growing with content
  • <line-name> - an arbitrary name of your choosing
.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

Examples:

When you specify only track sizes, the grid lines are automatically assigned positive and negative numbers:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}
40px25%100pxauto[1][2][3][4][5][6][4][3][2][1][-6][-5][-4][-3][-2][-1][-1][-2][-3][-4]40px50px50pxauto

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

.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];
}
40px25%100pxauto[first][line2][line3][col4-start][five][end][row1-start][row1-end][third-line][last-line]40px50px50pxauto

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Which is equivalent to this:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

If multiple lines share the same name, they can be referenced by their line name and count.

.item {
  grid-column-start: col-start 2;
}

The repeat() function also accepts auto-fill and auto-fit as the repetition count, letting the browser decide how many tracks to create based on available space. Combined with minmax(), this enables fully responsive grids without media queries:

.container {
  /* creates as many 200px–1fr columns as fit */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
  • auto-fill — fills the row with as many tracks as possible, even if some remain empty
  • auto-fit — collapses empty tracks to 0, so filled tracks expand to use the remaining space

The fr unit lets you size a track as a fraction of the free space in the grid container. For example, this creates three equal-width columns:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-areas

Defines a grid template by referencing the names of grid areas specified with the grid-area property. Repeating a grid-area name makes that area span those cells. A period signifies an empty cell. The syntax itself provides a visualization of the grid’s structure.

Values:

  • <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 | ..."
    "...";
}

Example:

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


.container {
  grid-template-columns: 1fr 1fr 1fr max-content;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

That creates a grid that’s four columns wide by three rows tall. The entire top row is the header area. In the middle row, the main area spans two cells, followed by one empty cell and one sidebar area. The last row is entirely footer.

header
main
sidebar
footer

Each row in your declaration needs to have the same number of cells.

You can use any number of adjacent periods to declare a single empty cell. As long as the periods have no spaces between them they represent a single cell.

Notice that you’re not naming lines with this syntax, just areas. When you use this syntax the lines on either end of the areas are actually getting named automatically. If the name of your grid area is foo, the name of the area’s starting row line and starting column line will be foo -start, and the name of its last row line and last column line will be foo -end. This means that some lines might have multiple names, such as the far left line in the above example, which will have three names: header-start, main-start, and footer-start.

grid-template

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

Values:

  • none - sets all three properties to their initial values
  • <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
.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

It also accepts a more complex but quite handy syntax for specifying all three. Here’s an example:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

That’s equivalent to this:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

Since grid-template doesn’t reset the implicit grid properties (grid-auto-columns, grid-auto-rows, and grid-auto-flow), which is probably what you want to do in most cases, it’s recommended to use the grid property instead of grid-template.

column-gap / row-gap

Specifies the size of the gutters between columns/rows.

Values:

  • <line-size> - a length value
.container {
  column-gap: <line-size>;
  row-gap: <line-size>;
}

Example:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 20px;
}
1
2
3
4
5
6
7
8
9

The gutters are only created between the columns/rows, not on the outer edges.

gap

A shorthand for row-gap and column-gap.

Values:

  • <row-gap> <column-gap> - length values
.container {
  gap: <row-gap> <column-gap>;
}

Example:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 10px 30px;
}
1
2
3
4
5
6
7
8
9

If only one value is provided, it applies to both row and column gaps.

justify-items

Aligns grid items along the inline axis (as opposed to align-items, which aligns along the block axis). This value applies to all grid items inside the container.

Values:

  • start - aligns items to be flush with the start edge of their cell
  • end - aligns items to be flush with the end edge of their cell
  • center - aligns items in the center of their cell
  • stretch - fills the whole width of the cell (this is the default)
  • baseline - aligns items along their text baseline
.container {
  justify-items: start | end | center | stretch | baseline;
}

Examples:

.container {
  justify-items: start;
}
1
2
3
4
5
6
.container {
  justify-items: end;
}
1
2
3
4
5
6
.container {
  justify-items: center;
}
1
2
3
4
5
6
.container {
  justify-items: stretch;
}
1
2
3
4
5
6

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

align-items

Aligns grid items along the block axis (as opposed to justify-items, which aligns along the inline axis). This value applies to all grid items inside the container.

Values:

  • start - aligns items to be flush with the start edge of their cell
  • end - aligns items to be flush with the end edge of their cell
  • center - aligns items in the center of their cell
  • stretch - fills the whole height of the cell (this is the default)
  • baseline - aligns items along their text baseline
.container {
  align-items: start | end | center | stretch | baseline;
}

Examples:

.container {
  align-items: start;
}
1
2
3
4
5
6
.container {
  align-items: end;
}
1
2
3
4
5
6
.container {
  align-items: center;
}
1
2
3
4
5
6
.container {
  align-items: stretch;
}
1
2
3
4
5
6

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

place-items

place-items sets both the align-items and justify-items properties in a single declaration.

Values:

  • <align-items> <justify-items> - The first value sets align-items, the second sets justify-items. If the second value is omitted, the first is assigned to both properties.

For more details, see align-items and justify-items.

justify-content

Sometimes the total size of your grid might be less than the size of its grid container. This can happen when your tracks are sized with non-flexible units like px. In that case, you can control how the grid itself is aligned within the grid container. This property aligns the grid along the inline axis (as opposed to align-content, which aligns along the block axis).

Values:

  • start - aligns the grid flush with the start edge of the grid container
  • end - aligns the grid flush with the end edge of the grid container
  • center - centers the grid within the grid container
  • stretch - stretches auto-sized tracks so the grid fills the full width of the grid container
  • space-around - distributes space around the grid tracks, with half-sized spaces at the far ends
  • space-between - distributes space between the grid tracks, with no space at the far ends
  • space-evenly - distributes space evenly between the grid tracks, including the far ends
.container {
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
}

Examples:

.container {
  justify-content: start;
}
1
2
3
4
5
6
.container {
  justify-content: end;
}
1
2
3
4
5
6
.container {
  justify-content: center;
}
1
2
3
4
5
6
.container {
  justify-content: stretch;
}
1
2
3
4
5
6
.container {
  justify-content: space-around;
}
1
2
3
4
5
6
.container {
  justify-content: space-between;
}
1
2
3
4
5
6
.container {
  justify-content: space-evenly;
}
1
2
3
4
5
6

align-content

Sometimes the total size of your grid might be less than the size of its grid container. This can happen when your tracks are sized with non-flexible units like px. In that case, you can control how the grid itself is aligned within the grid container. This property aligns the grid along the block axis (as opposed to justify-content, which aligns along the inline axis).

Values:

  • start - aligns the grid flush with the start edge of the grid container
  • end - aligns the grid flush with the end edge of the grid container
  • center - centers the grid within the grid container
  • stretch - stretches auto-sized tracks so the grid fills the full height of the grid container
  • space-around - distributes space around the grid tracks, with half-sized spaces at the far ends
  • space-between - distributes space between the grid tracks, with no space at the far ends
  • space-evenly - distributes space evenly between the grid tracks, including the far ends
.container {
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

Examples:

.container {
  align-content: start;
}
1
2
3
4
5
6
.container {
  align-content: end;
}
1
2
3
4
5
6
.container {
  align-content: center;
}
1
2
3
4
5
6
.container {
  align-content: stretch;
}
1
2
3
4
5
6
.container {
  align-content: space-around;
}
1
2
3
4
5
6
.container {
  align-content: space-between;
}
1
2
3
4
5
6
.container {
  align-content: space-evenly;
}
1
2
3
4
5
6

place-content

place-content sets both the align-content and justify-content properties in a single declaration.

Values:

  • <align-content> <justify-content> - The first value sets align-content, the second sets justify-content. If the second value is omitted, the first is assigned to both properties.

grid-auto-columns / grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks). Implicit tracks get created when there are more grid items than cells in the grid or when a grid item is placed outside of the explicit grid. (see The Difference Between Explicit and Implicit Grids)

Values:

  • <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>...;
}

To illustrate how implicit grid tracks get created, think about this:

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

This creates a 2 x 2 grid.

But now imagine you use grid-column and grid-row to position your grid items like this:

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

a

b

We told .item-b to start on column line 5 and end at column line 6, but we never defined a column line 5 or 6. Because we referenced lines that don’t exist, implicit tracks are created to fill in the gaps. We can use grid-auto-columns and grid-auto-rows to specify the widths of these implicit tracks:

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

a

b

grid-auto-flow

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 (default)
  • 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. Can be combined with row or column (e.g. row dense), or used alone (defaults to row packing)
.container {
  grid-auto-flow: row | column | dense | row dense | column dense;
}

Note that dense only changes the visual order of your items and might cause them to appear out of order, which is bad for accessibility.

Examples:

Consider this HTML:

<section class="container">
  <div class="item-a">a</div>
  <div class="item-b">b</div>
  <div class="item-c">c</div>
  <div class="item-d">d</div>
  <div class="item-e">e</div>
</section>

You define a grid with five columns and two rows, and set grid-auto-flow to row (which is also the default):

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 60px);
  grid-auto-flow: row;
}

When placing the items on the grid, you only specify spots for two of them:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Because we set grid-auto-flow to row, our grid will look like this. Notice how the three items we didn’t place (item-b, item-c and item-d) flow across the available rows:

a

b
c
d

e

If we instead set grid-auto-flow to column, item-b, item-c and item-d flow down the columns:

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 60px);
  grid-auto-flow: column;
}

a

b
c
d

e

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 (Note: You can only specify the explicit or the implicit grid properties in a single grid declaration).

Values:

  • none - sets all sub-properties to their initial values.
  • <grid-template> - works the same as the grid-template shorthand.
  • <grid-template-rows> / \[ auto-flow && dense? \] <grid-auto-columns>? - sets grid-template-rows to the specified value. If the auto-flow keyword is to the right of the slash, it sets grid-auto-flow to column. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-columns is omitted, it is set to auto.
  • \[ auto-flow && dense? \] <grid-auto-rows>? / <grid-template-columns> - sets grid-template-columns to the specified value. If the auto-flow keyword is to the left of the slash, it sets grid-auto-flow to row. If the dense keyword is specified additionally, the auto-placement algorithm uses a “dense” packing algorithm. If grid-auto-rows is omitted, it is set to auto.

Examples:

The following two code blocks are equivalent:

.container {
  grid: 100px 300px / 3fr 1fr;
}
.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

The following two code blocks are equivalent:

.container {
  grid: auto-flow / 200px 1fr;
}
.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

The following two code blocks are equivalent:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}
.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

And the following two code blocks are equivalent:

.container {
  grid: 100px 300px / auto-flow 200px;
}
.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

It also accepts a more complex but quite handy syntax for setting everything at once. You specify grid-template-areas, grid-template-rows and grid-template-columns, and all the other sub-properties are set to their initial values. What you’re doing is specifying the line names and track sizes inline with their respective grid areas. This is easiest to describe with an example:

.container {
  grid:
    [row1-start] "header header header" 1fr [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

That’s equivalent to this:

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

Properties for the Children (Grid Items)

Note: float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

grid-column-start / grid-column-end

grid-row-start / grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start / grid-row-start is the line where the item begins, and grid-column-end / grid-row-end is the line where the item ends.

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 {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Examples:

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

item-a

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

item-b

If no grid-column-end / grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

grid-column / grid-row

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

Values:

  • <start-line> / <end-line> - each one accepts the same values as the longhand version, including span
.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Example:

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

item-c

If no end line value is declared, the item will span 1 track by default.

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.

Values:

  • <name> - a name of your choosing
  • <row-start> / <column-start> / <row-end> / <column-end> - can be numbers or named lines
.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Examples:

As a way to assign a name to the item:

.item-d {
  grid-area: header;
}

As the shorthand for grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

item-d

justify-self

Aligns a grid item inside a cell along the inline axis (as opposed to align-self, which aligns along the block axis). This value applies to a grid item inside a single cell.

Values:

  • auto - uses the justify-items value of the parent grid container
  • start - aligns the grid item to be flush with the start edge of the cell
  • end - aligns the grid item to be flush with the end edge of the cell
  • center - aligns the grid item in the center of the cell
  • stretch - fills the whole width of the cell (this is the default)
  • baseline - aligns the grid item along its text baseline
.item {
  justify-self: auto | start | end | center | stretch | baseline;
}

Examples:

.item-a {
  justify-self: start;
}

a

2
3
4
5
6
7
8
9
.item-a {
  justify-self: end;
}

a

2
3
4
5
6
7
8
9
.item-a {
  justify-self: center;
}

a

2
3
4
5
6
7
8
9
.item-a {
  justify-self: stretch;
}

a

2
3
4
5
6
7
8
9

To set alignment for all the items in a grid, this behavior can also be set on the grid container via the justify-items property.

align-self

Aligns a grid item inside a cell along the block axis (as opposed to justify-self, which aligns along the inline axis). This value applies to a grid item inside a single cell.

Values:

  • auto - uses the align-items value of the parent grid container
  • start - aligns the grid item to be flush with the start edge of the cell
  • end - aligns the grid item to be flush with the end edge of the cell
  • center - aligns the grid item in the center of the cell
  • stretch - fills the whole height of the cell (this is the default)
  • baseline - aligns the grid item along its text baseline
.item {
  align-self: auto | start | end | center | stretch | baseline;
}

Examples:

.item-a {
  align-self: start;
}

a

2
3
4
5
6
7
8
9
.item-a {
  align-self: end;
}

a

2
3
4
5
6
7
8
9
.item-a {
  align-self: center;
}

a

2
3
4
5
6
7
8
9
.item-a {
  align-self: stretch;
}

a

2
3
4
5
6
7
8
9

To align all the items in a grid, this behavior can also be set on the grid container via the align-items property.

place-self

place-self sets both the align-self and justify-self properties in a single declaration.

Values:

  • auto - the default alignment for the layout mode
  • <align-self> <justify-self> - The first value sets align-self, the second sets justify-self. If the second value is omitted, the first is assigned to both properties.

Examples:

.item-a {
  place-self: center;
}

a

2
3
4
5
6
7
8
9
.item-a {
  place-self: center stretch;
}

a

2
3
4
5
6
7
8
9

Browser support

Baseline Widely available
Grid Usage: 95% MDN
Chrome since 57 Mar 2017
Edge since 16 Oct 2017
Firefox since 52 Mar 2017
Safari since 10.1 Mar 2017
iOS Safari since 10.3 Mar 2017
Android since 57
Reply by email