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.

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.

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

/* Repeat a 1fr row 4 times and a 1fr column 3 times */
/* Map names to each grid cell */
.grid-container {
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    grid-gap: 20px;
    grid-template-areas:
        'header header header'
        'sidebar content content'
        'sidebar content content'
        'footer footer footer';
}

.item-1 {
    grid-area: content;
}

.item-2 {
    grid-area: sidebar;
}

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

.item-4 {
    grid-area: footer;
}

/* Repeat a 1fr column 4 times */
/* Automatic rows, each a minimum of 100px and maximum of 1fr tall */
/* Map names to each grid cell */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    grid-gap: 20px;
    grid-template-areas:
        'a a b b'
        'a a b b'
        'c c d d'
        'c c d d';
}

.item-1 {
    grid-area: a;
    align-self: start;
}

.item-2 {
    grid-area: b;
    align-self: end;
}

.item-3 {
    grid-area: c;
    align-self: start;
}

.item-4 {
    grid-area: d;
    align-self: end;
}

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.

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

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

.item-1 {
    grid-column: col 1;
    grid-row: row 1;
    z-index: 1;
}

.item-2 {
    grid-column: col 1 / span 2;
    grid-row: row 1 / span 2;
    z-index: 2;
}

.item-3 {
    grid-column: col 1 / span 3;
    grid-row: row 1 / span 3;
    z-index: 3;
}

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

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

.item-6 {
    grid-column: col 5;
    grid-row: row 4;
    z-index: 1;
}

/* Repeat 6 1fr rows named "row" and 6 1fr columns named "col" */
.grid-container {
    display: grid;
    grid-template: repeat(6, [row] 1fr) / repeat(6, [col] 1fr);
    grid-gap: 20px;
}

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

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

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

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

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

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

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!

In Firefox, right click and select “Inspect Element.”
In the Developer Tools, find an element with a display: grid; declaration and click the icon.
You'll see the grid overlaid on the page, including grid lines and tracks.