ARTICLES NOTES LINKS GUIDES ALMANAC PICKS SHUFFLE

HOME / GUIDES /

CSS Grid Layout Guide

Chris House on Sep 26, 2024

Our comprehensive guide to CSS grid, focusing on all the settings both
for the grid parent container and the grid child elements.

Get the poster!

Table of contents Reference this guide a lot?
Part 1: Introduction Here’s a high-res image you
Part 2: Basics can print!
Part 3: Important Terminology
Part 4: Grid Properties DOWNLOAD FREE

Part 5: Special Units & Functions

Part 6: Browser Support
Part 7: Fluid Columns Snippet
Part 8: Animation
Part 9: CSS Grid Tricks!
Part 10: Learning CSS Grid
Part 11: CSS Grid Videos
Part 12: More Sources

Introduction to CSS Grid

CSS Grid basics

Important CSS Grid terminology

CSS Grid properties

Properties for the Parent Properties for the Children

(Grid Container) (Grid Items)

Jump links Jump links

float, display: inline-block, display: table-cell, vertical-align and column-

Hey!
display * properties have no effect on a grid item.

Defines the element as a grid container and establishes a new

grid-column-start
grid formatting context for its contents.
grid-column-end
Values:
grid-row-start
grid – generates a block-level grid grid-row-end
inline-grid – generates an inline-level grid

CSS Determines a grid item’s location within the grid by referring to

.container {
specific grid lines. grid-column-start/grid-row-start is the
display: grid | inline-grid;
} line where the item begins, and grid-column-end/grid-row-
end is the line where the item ends.

The ability to pass grid parameters down through nested elements (aka Values:
Hey! subgrids) has been moved to level 2 of the CSS Grid specification. Here’s a
quick explanation. <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
grid-template-columns next line with the provided name
grid-template-rows auto – indicates auto-placement, an automatic span, or a
default span of one

Defines the columns and rows of the grid with a space- CSS

.item {
separated list of values. The values represent the track size, and grid-column-start: <number> | <name> | span <number> | s
the space between them represents the grid line. grid-column-end: <number> | <name> | span <number> | spa
grid-row-start: <number> | <name> | span <number> | span
Values: grid-row-end: <number> | <name> | span <number> | span <
}
<track-size> – can be a length, a percentage, or a fraction
of the free space in the grid using the fr unit (more on this
Examples:
unit over at DigitalOcean)
<line-name> – an arbitrary name of your choosing CSS

.item-a {
CSS grid-column-start: 2;
.container { grid-column-end: five;
grid-template-columns: ... ...; grid-row-start: row1-start;
/* e.g. grid-row-end: 3;
1fr 1fr }
minmax(10px, 1fr) 3fr
repeat(5, 1fr)
50px auto 100px 1fr
*/
grid-template-rows: ... ...;
/* e.g.
min-content 1fr min-content
100px 1fr max-content
*/
}

Grid lines are automatically assigned positive numbers from

these assignments (-1 being an alternate for the very last row). CSS

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

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

CSS

.container {
grid-template-columns: [first] 40px [line2] 50px [line3]
grid-template-rows: [row1-start] 25% [row1-end] 100px [t
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.

Learn more about the span notation in this article by

DigitalOcean.

grid-column
Note that a line can have more than one name. For example, grid-row
here the second line will have two names: row1-end and row2-
start:
Shorthand for grid-column-start + grid-column-end,
and grid-row-start + grid-row-end, respectively.
CSS

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

<start-line> / <end-line> – each one accepts all the

If your definition contains repeating parts, you can use same values as the longhand version, including span
the repeat() notation to streamline things:
CSS

.item {
CSS
grid-column: <start-line> / <end-line> | <start-line> /
.container {
grid-row: <start-line> / <end-line> | <start-line> / spa
grid-template-columns: repeat(3, 20px [col-start]);
}
}

Which is equivalent to this: Example:

CSS
CSS
.item-c {
.container {
grid-column: 3 / span 2;
grid-template-columns: 20px [col-start] 20px [col-start]
grid-row: third-line / 4;
}
}

If multiple lines share the same name, they can be referenced

by their line name and count.

CSS

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

The fr unit allows you to set the size of a track as a fraction of

the free space of the grid container. For example, this will set
each item to one third the width of the grid container:
If no end line value is declared, the item will span 1 track by
CSS
default.
.container {
grid-template-columns: 1fr 1fr 1fr;
}

The free space is calculated a ter any non-flexible items. In this grid-area
example the total amount of free space available to the fr units
doesn’t include the 50px:
Gives an item a name so that it can be referenced by a template
created with the grid-template-areas property. Alternatively,
CSS

.container {
grid-template-columns: 1fr 50px 1fr 1fr; 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

grid-template-areas <row-start> / <column-start> / <row-
end> / <column-end> – can be numbers or named lines

Defines a grid template by referencing the names of the grid CSS

.item {
areas which are specified with the grid-area property.
grid-area: <name> | <row-start> / <column-start> / <row-
Repeating the name of a grid area causes the content to span }
those cells. A period signifies an empty cell. The syntax itself
provides a visualization of the structure of the grid.
Examples:
Values:
As a way to assign a name to the item:
<grid-area-name> – the name of a grid area specified
CSS

with grid-area .item-d {

. – a period signifies an empty grid cell grid-area: header;

}
none – no grid areas are defined

CSS

.container { As the short-shorthand for grid-row-start + grid-column-

grid-template-areas: start + grid-row-end + grid-column-end:
"<grid-area-name> | . | none | ..."
"..."; CSS

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

Example:

CSS

.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
justify-self
}
.item-c {
grid-area: sidebar;
Aligns a grid item inside a cell along the inline (row) axis (as
} opposed to align-self which aligns along the block
.item-d { (column) axis). This value applies to a grid item inside a single
grid-area: footer;
cell.
}

Values:
.container {
display: grid;
start – aligns the grid item to be flush with the start edge of
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
the cell
grid-template-areas: end – aligns the grid item to be flush with the end edge of
"header header header header" the cell
"main main . sidebar"
center – aligns the grid item in the center of the cell
"footer footer footer footer";
} stretch – fills the whole width of the cell (this is the
default)

That’ll create a grid that’s four columns wide by three rows tall.
CSS

.item {
The entire top row will be composed of the header area. The justify-self: start | end | center | stretch;
middle row will be composed of two main areas, one empty }

cell, and one sidebar area. The last row is all footer.

Examples:
Each row in your declaration needs to have the same number of
CSS

cells. .item-a {
justify-self: start;
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.
CSS

.item-a {
Notice that you’re not naming lines with this syntax, just areas.
justify-self: end;
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
CSS

row line and last column line will be foo-end. This means that .item-a {
justify-self: center;
some lines might have multiple names, such as the far le t line
}
in the above example, which will have three names: header-
start, main-start, and footer-start.

CSS

.item-a {
justify-self: stretch;
}
grid-template

A shorthand for setting grid-template-rows, grid-template- To set alignment for all the items in a grid, this behavior can

columns, and grid-template-areas in a single declaration. also be set on the grid container via the justify-
items property.
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 align-self
specified values, respectively, and sets grid-template-
areas to none
Aligns a grid item inside a cell along the block (column) axis (as
CSS
opposed to justify-self which aligns along the inline
.container {
grid-template: none | <grid-template-rows> / <grid-templ
(row) axis). This value applies to the content inside a single grid
} item.

Values:
It also accepts a more complex but quite handy syntax for
specifying all three. Here’s an example: start – aligns the grid item to be flush with the start edge of
the cell
CSS

.container { end – aligns the grid item to be flush with the end edge of
grid-template: the cell
[row1-start] "header header header" 25px [row1-end]
center – aligns the grid item in the center of the cell
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
stretch – fills the whole height of the cell (this is the
} default)

CSS

.item {
That’s equivalent to this: align-self: start | end | center | stretch;
}
CSS

.container {
grid-template-rows: [row1-start] 25px [row1-end row2-sta
grid-template-columns: auto 50px auto; Examples:
grid-template-areas:
CSS
"header header header" .item-a {
"footer footer footer"; align-self: start;
} }

Since grid-template doesn’t reset the implicit grid properties

(grid-auto-columns, grid-auto-rows, and grid-auto-flow),
CSS

.item-a {
which is probably what you want to do in most cases, it’s align-self: end;
recommended to use the grid property instead of grid- }

template.

CSS

.item-a {
align-self: center;
}
column-gap
row-gap
grid-column-gap .item-a {
CSS

grid-row-gap align-self: stretch;

}

Specifies the size of the grid lines. You can think of it like
setting the width of the gutters between the columns/rows.
To align all the items in a grid, this behavior can also be set on
the grid container via the align-items property.
Values:

<line-size> – a length value

CSS

.container {
place-self
/* standard */
column-gap: <line-size>;
row-gap: <line-size>;
place-self sets both the align-self and justify-

/* old */ self properties in a single declaration.

grid-column-gap: <line-size>;
grid-row-gap: <line-size>; Values:
}
auto – The “default” alignment for the layout mode.
<align-self> / <justify-self> – The first value
Example:
sets align-self, the second value justify-self. If the
CSS second value is omitted, the first value is assigned to both
.container {
properties.
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
Examples:
column-gap: 10px;
row-gap: 15px; CSS

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

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

the outer edges. CSS

.item-a {
Note: The grid- prefix will be removed and grid-column- place-self: center stretch;
}
gap and grid-row-gap renamed to column-gap and row-gap.
The unprefixed properties are already supported in Chrome
68+, Safari 11.2 Release 50+, and Opera 54+.
All major browsers except Edge support the place-
self shorthand property.

gap
grid-gap Special Units & Functions

A shorthand for row-gap and column-gap fr units

Values:
You’ll likely end up using a lot of fractional units in CSS Grid,
<grid-row-gap> <grid-column-gap> – length values like 1fr. They essentially mean “portion of the remaining
space”. So a declaration like:
CSS

.container {
CSS
/* standard */ grid-template-columns: 1fr 3fr;
gap: <grid-row-gap> <grid-column-gap>;

/* old */ Means, loosely, 25% 75%. Except that those percentage values
grid-gap: <grid-row-gap> <grid-column-gap>;
are much more firm than fractional units are. For example, if
}
you added padding to those percentage-based columns, now
you’ve broken 100% width (assuming a content-box box
Example: model). Fractional units also much more friendly in
combination with other units, as you can imagine:
CSS

.container {
CSS
grid-template-columns: 100px 50px 100px;
grid-template-columns: 50px min-content 1fr;
grid-template-rows: 80px auto 80px;
gap: 15px 10px;
}

If no row-gap is specified, it’s set to the same value as column-

gap
Sizing Keywords

Note: The grid- prefix is deprecated (but who knows, may

When sizing rows and columns, you can use all the lengths you
never actually be removed from browsers). Essentially grid-
are used to, like px, rem, %, etc, but you also have keywords:
gap renamed to gap. The unprefixed property is already
supported in Chrome 68+, Safari 11.2 Release 50+, and Opera min-content: the minimum size of the content. Imagine a
54+. line of text like “E pluribus unum”, the min-content is likely
the width of the word “pluribus”.
max-content: the maximum size of the content. Imagine the
sentence above, the max-content is the length of the whole
sentence.
justify-items
auto: this keyword is a lot like fr units, except that they
“lose” the fight in sizing against fr units when allocating the
Aligns grid items along the inline (row) axis (as opposed remaining space.
to align-items which aligns along the block (column) axis). This Fractional units: see above
value applies to all grid items inside the container.

Values:

start – aligns items to be flush with the start edge of their Sizing Functions
cell
end – aligns items to be flush with the end edge of their cell
The fit-content() function uses the space available, but
center – aligns items in the center of their cell
never less than min-content and never more than max-
stretch – fills the whole width of the cell (this is the content.
default)
The minmax() function does exactly what it seems like: it sets
CSS a minimum and maximum value for what the length is able
.container {
to be. This is useful for in combination with relative units.
justify-items: start | end | center | stretch;
Like you may want a column to be only able to shrink so far.
}
This is extremely useful and probably what you want:

CSS

Examples: grid-template-columns: minmax(100px, 1fr) 3fr;

CSS

.container {
The min() function.
justify-items: start;
} The max() function.

CSS

.container {
justify-items: end; The repeat() Function and Keywords
}

The repeat() function can save some typing:

CSS
CSS
.container {
grid-template-columns:
justify-items: center;
1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* easier: */
grid-template-columns:
CSS repeat(8, 1fr);
.container {
justify-items: stretch; /* especially when: */
} grid-template-columns:
repeat(8, minmax(10px, 1fr));

This behavior can also be set on individual grid items via But repeat() can get extra fancy when combined with
the justify-self property. keywords:

auto-fill: Fit as many possible columns as possible on a

row, even if they are empty.
auto-fit: Fit whatever columns there are into the space.
align-items Prefer expanding columns to fill space rather than empty
columns.

Aligns grid items along the block (column) axis (as opposed
This bears the most famous snippet in all of CSS Grid and one
to justify-items which aligns along the inline (row) axis). This
of the all-time great CSS tricks:
value applies to all grid items inside the container.
CSS

grid-template-columns:
Values:
repeat(auto-fit, minmax(250px, 1fr));

stretch – fills the whole height of the cell (this is the

default)
The difference between the keywords is spelled out in detail
start – aligns items to be flush with the start edge of their here.
cell
end – aligns items to be flush with the end edge of their cell
center – aligns items in the center of their cell
baseline – align items along text baseline. There are
Masonry
modifiers to baseline — first baseline and last baseline
which will use the baseline from the first or last line in the
case of multi-line text.
An experimental feature of CSS grid is masonry layout. Note
CSS that there are lots of approaches to CSS masonry, but mostly of
.container {
them are trickery and either have major downsides or aren’t
align-items: start | end | center | stretch;
what you quite expect.
}

The spec has an official way now, and this is behind a flag in
Examples: Firefox:

CSS CSS

.container { .container {
align-items: start; display: grid;
} grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}

CSS

.container {
See Rachel’s article for a deep dive.
align-items: end;
}

CSS

.container { Subgrid
align-items: center;
}
Subgrid is an extremely useful feature of grids that allows grid
items to have a grid of their own that inherits grid lines from
CSS the parent grid.
.container {
align-items: stretch; CSS

} .parent-grid {
display: grid;
grid-template-columns: repeat(9, 1fr);
}

This behavior can also be set on individual grid items via .grid-item {
grid-column: 2 / 7;
the align-self property.

display: grid;
There are also modifier keywords safe and unsafe (usage is like
grid-template-columns: subgrid;
align-items: safe end). The safe keyword means “try to
}
align like this, but not if it means aligning an item such that it .child-of-grid-item {
moves into inaccessible overflow area”, while unsafe will allow /* gets to participate on parent grid! */

moving content into inaccessible areas (“data loss”). grid-column: 3 / 6;

}

This is only supported in Firefox right now, but it really needs

to get everywhere.
place-items
It’s also useful to know about display: contents;. This is not
the same as subgrid, but it can be a useful tool sometimes in a
place-items sets both the align-items and justify-
similar fashion.
items properties in a single declaration.
HTML

Values: <div class="grid-parent">

<align-items> / <justify-items> – The first value <div class="grid-item"></div>

<div class="grid-item"></div>
sets align-items, the second value justify-items. If the
second value is omitted, the first value is assigned to both
<ul style="display: contents;">
properties.
<!-- These grid-items get to participate on
the same grid!-->
For more details, see align-items and justify-items. <li class="grid-item"></li>
<li class="grid-item"></li>
This can be very useful for super quick multi-directional </ul>
centering:
</div>
CSS

.center {
display: grid;
place-items: center;
}

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 inline (row) axis (as opposed
to align-content which aligns the grid along the block
(column) axis).

Values:

start – aligns the grid to be flush with the start edge of the
grid container
end – aligns the grid to be flush with the end edge 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

CSS

.container {
justify-content: start | end | center | stretch | space-
}

Examples:

CSS

.container {
justify-content: start;
}

CSS

.container {
justify-content: end;
}

CSS

.container {
justify-content: center;
}

CSS

.container {
justify-content: stretch;
}

CSS

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

CSS

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

CSS

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

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 block (column) axis (as
opposed to justify-content which aligns the grid along
the inline (row) axis).

Values:

start – aligns the grid to be flush with the start edge of the
grid container
end – aligns the grid to be flush with the end edge 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

CSS

.container {
align-content: start | end | center | stretch | space-ar
}

Examples:

CSS

.container {
align-content: start;
}

CSS

.container {
align-content: end;
}

CSS

.container {
align-content: center;
}

CSS

.container {
align-content: stretch;
}

CSS

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

CSS

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

CSS

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

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 value justify-content. If
the second value is omitted, the first value is assigned to
both properties.

All major browsers except Edge support the place-

content shorthand property.

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

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)

CSS

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

To illustrate how implicit grid tracks get created, think about

this:

CSS

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

CSS

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

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 with widths of 0
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:

CSS

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

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

CSS

.container {
grid-auto-flow: row | column | 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:

HTML

<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-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):

CSS

.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}

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

CSS

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

If we instead set grid-auto-flow to column, item-b, item-

c and item-d flow down the columns:

CSS

.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: column;
}

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 le t 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:

CSS

.container {
grid: 100px 300px / 3fr 1fr;
}

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

The following two code blocks are equivalent:

CSS

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

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

The following two code blocks are equivalent:

CSS

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

CSS

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

CSS

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

CSS

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

CSS Grid browser support

Fluid columns snippet

CSS Grid animation

CSS Grid tricks!

Learning CSS Grid

CSS Grid videos

More CSS Grid sources

This comment thread is closed. If you have important information to share, please contact us.

KEEP UP TO DATE ON WEB DEV

with our hand-cra ted newsletter

SUBSCRIBE

CSS-Tricks is powered by DigitalOcean.

D I G I TA LO C E A N CSS -T R I C KS SO C I A L
About DO Contact RSS Feeds
Cloudways Write for CSS-Tricks! CodePen
Legal stuff Advertise with us Mastodon
Get free credit! Bluesky