CSS Grid examples

The grid layout is a two-dimensional layout system.

Grid examples

The following grids all have the same HTML.

<div class="grid">
          <div>1</div>
          <div>2</div>
          <div>3</div>
        </div>

But their layout is determined by CSS.

Simple grid layout

1
2
3
grid-template-columns: 1fr 1fr 1fr;

Which can also be written:

grid-template-columns: repeat(3, 1fr);

fr simply means a fraction of the whole. So this instruction reads, "repeat a single unit of fr three times".

Since the fractions are the same, 10fr or 100fr are both valid, and would have the same effect.

Unequal grid layout

1
2
3
grid-template-columns: 10fr 1fr 1fr;

This instruction reads, "make the first box 10 units long and the next two 1 each ".

Responsive grid layout

1
2
3
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Which means, "fit in as many boxes on a row as possible, so long as they are at least 200px wide ". Use the Chrome DevTools to narrow the width of the screen until you see a change in the layout of the three boxes.

Related content

Further reading