Grid Demo

Series of grid demos

Each grid column uses 1 share of the available space.
grid-template-columns: repeat(4, 1fr)

First
Second
Third
Fourth

The second grid column has a minimum of 50px and a maximum of its content; the first and last grid columns use an equal share of the remaining space.
grid-template-columns: 1fr minmax(50px, max-content) 1fr;

First
Second
This will be a min of 50px and a max of all the content.
Third

There will be 4 columns with a repeating patern of 50px and 100px.
grid-template-columns: repeat(4, 50px 100px)

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

auto-fill will fill each row with the column's intrensic width. If the viewport is wider, the row will fill with empty columns of the same width. grid-template-columns: repeat(auto-fill, 100px 1fr)

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

auto-fit will fill each row with the column's intrensic width. If the viewport is wider, the columns will expand to fit the viewport. Additional zero width columns will be added corresponding to the expanded width. grid-template-columns: repeat(auto-fit, 100px 1fr)

First
Second
Third
Fourth
Fifth
Sixth
Seventh
Eighth

grid-auto-rows: 25px 100px automatically creates as many rows as needed following the specified pattern: 25px 100px

First grid cell
Second
2 grid-template-rows have been explicitly created.
Third
Fourth
Additional rows are intrinsically created at the bottom as needed.
Fifth

grid-template-columns: 50px 1fr; grid-template-rows: 70px 100px; grid-auto-flow: row;

First grid cell
Second grid cell
2 grid-template-columns have been explicitly created.
Third
Fourth
2 grid-template-rows have been explicitly created.
grid-auto-flow: row; is the default so need (almost) never be specified.
Fifth
Sixth
Additional rows are intrinsically created at the bottom as needed.
Seventh
Eighth

grid-auto-flow: column

First
Second
Third
2 grid-template-columns are explicitly created.
Fourth
Additional columns are intrinsically created at the end as needed.
Fifth
Sixth
Seventh
Eighth

Explicit and implicit rules used together grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 3.5em; grid-auto-rows: 4.5em 3.5em;

First
3 columns each with a 1fr width
Second
grid-template-rows: 3.5em. Only 1 row specified.
Third
Fourth
Fifth
grid-auto-rows: 4.5em 3.5em; creates a pattern of rows as needed.
Sixth
Seventh
Eighth

min-content and max-content grid-template-columns: max-content 1fr min-content 3fr;

max-content will size the element to the full length of the content. It will not wrap.

min-content will size the element to the width of the longest single content. All else will wrap.

min-content and max-content will work on any element that takes a width property.

Responsive grid with auto-sized columns grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

The auto-fill function allows the grid to line up as many grid tracks (columns or rows) as possible without overflowing the container. This can create similar behavior to flex layout's flex-wrap: wrap.

The minmax() function sets a minimum and maximum size range for a grid track

Any fixed size will work. fr units will work. % widths are less successful.

AppleBananaPearGrapeStrawberry

Responsive grid with sized columns grid-template-columns: 100px 200px repeat(auto-fill, minmax(300px, 1fr));

AppleBananaThe first 2 columns are declared.The rest are minmax.If wrap occurs, the grid items will first go into the explicit columns.Then if the wrap continues, move to the implicit columns.The row height will expand as needed to accomidate the grid contents.

Responsive Card Demo with auto-fit

This uses the default: justify-items: stretch. To keep the cards a fixed size, use justify-items: center

Card #1

Card #2

Card #3

Card #4

Card #5

>