CSS Grid

CSS Grid simplifies existing layout patterns
and adds new possibilities for graphic design.

It’s a layout framework —
without the framework.

Layout. Inspect. Design. Enjoy.

Fixed or Flexible

You can create a grid with fixed track sizes or with flexible sizes using percentages or the new fr fractional unit.

It looks like your web browser doesn’t support CSS Grid.
To see this demo, try viewing this page in the latest Firefox.

1
2
3
4
5
6

CSS

/* Three columns: 100px each */
.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 20px;
}
/* Three columns: 1 fraction, 2 fractions, 3 fractions */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    grid-gap: 20px;
}
/* Three columns: 50%, 100px, and the remaining available fraction */
/* Two rows: 100px and 200px */
.grid-container {
    display: grid;
    grid-template-columns: 50% 100px 1fr;
    grid-template-rows: 100px 200px;
    grid-gap: 20px;
}

Place & Align

You can place items at precise locations on the grid independent of their HTML source order. Alignment features control how items align when placed into a grid area, and also how the whole grid is aligned.

It looks like your web browser doesn’t support CSS Grid.
To see this demo, try viewing this page in the latest Firefox.

1
2
3
4

CSS

/* Repeat a 1fr column 3 times */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: 2;
    grid-row: 2;
}

.item-2 {
    grid-column: 1;
    grid-row: 1;
}

.item-3 {
    grid-column: 3;
    grid-row: 3;
}

.item-4 {
    grid-column: 3;
    grid-row: 1;
}

Span & Overlap

Items can span multiple grid cells and areas can overlap each other. You can control the layering with z-index.

It looks like your web browser doesn’t support CSS Grid.
To see this demo, try viewing this page in the latest Firefox.

1
2
3
4
5
6

CSS

/* Repeat 3 rows named "row", each between 120px and 1fr tall */
/* Repeat 4 columns named "col", each 1fr wide */
.grid-container {
    display: grid;
    grid-template: repeat(3, [row] minmax(120px, 1fr)) / repeat(4, [col] 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: col 1 / span 4;
    grid-row: row 1;
}

.item-2 {
    grid-column: col 4;
    grid-row: row 1 / span 3;
}

.item-3 {
    grid-column: col 1;
    grid-row: row 2;
}

.item-4 {
    grid-column: col 2 / span 2;
    grid-row: row 2;
}

.item-5 {
    grid-column: col 1;
    grid-row: row 3;
}

.item-6 {
    grid-column: col 2 / span 2;
    grid-row: row 3;
}

Inspect the Design

Firefox’s Grid Inspector Tool lets you see the grid lines in the browser while you’re creating a layout or studying other examples of CSS Grid in action. In fact, this entire page was laid out using CSS Grid. Try it out!

Don’t have Firefox & want to try
the Grid Inspector tool?

Your system may not meet the requirements for Firefox, but you can try one of these versions:

Your system doesn't meet the requirements to run Firefox.

Your system doesn't meet the requirements to run Firefox.

Please follow these instructions to install Firefox.

Firefox Privacy Notice

It looks like you’re using an older version of Firefox that doesn’t support CSS Grid.

Your system may not meet the requirements for Firefox, but you can try one of these versions:

Your system doesn't meet the requirements to run Firefox.

Your system doesn't meet the requirements to run Firefox.

Please follow these instructions to install Firefox.

Firefox Privacy Notice