CSS grid

CSS grid, as its name implies, refers to positioning HTML elements into rows and columns.

CSS grid by default

By default, the display: grid works much like display: block, i.e.

1.grid {
2  display: grid;
3}

...with an HTML of:

1<div class="grid">
2  <div class="card">a</div>
3  <div class="card">b</div>
4  <div class="card">c</div>
5  <div class="card">d</div>
6</div>

would simply display four "card-like" containers on top of each other like this:

1[a]
2[b]
3[c]
4[d]

CSS grid template columns

However, if we were to introduce another property into .grid called grid-template-columns we could create a layout of horizontally-aligned items with little effort:

1.grid {
2  display: grid;
3  grid-template-columns: 100px 200px 100px 50px;
4}

This would simply create a grid of four columns:

• first column: 100px wide
• second column: 200px wide
• third column: 100px wide
• fourth column: 50px wide

It would arrange horizontally-aligned like this:

1[a] [b] [c] [d]

...with [b] taking up twice the space as [a] and [c], while [d] only takes half the space!