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.

.grid {
  display: grid;
}

...with an HTML of:

<div class="grid">
  <div class="card">a</div>
  <div class="card">b</div>
  <div class="card">c</div>
  <div class="card">d</div>
</div>

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

[a]
[b]
[c]
[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:

.grid {
  display: grid;
  grid-template-columns: 100px 200px 100px 50px;
}

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:

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

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