CSS Grid: Example: simple grid layout

I want to do a little demo of CSS Grid.

Starting from this codepen where we have a body with a div and 4 paragraphs that by default are styled like this:


Note: 💁‍♂️ zoom: 2 is just a setting to make the result bigger, you can freely remove that

Because p tags are block elements, we have one for each line.

Let’s add a little border to the paragraphs.

p {
  border: 1px solid;


I’m going to add some padding, like 20 pixels, so we have some more spacing inside the p tag


I’m going to remove all the margin, which is added by the browser, so each p element is close to the other.


I’m also going to say text-align: center to center the text inside the p tag. Let me also pick a nicer color, for example, this one and I’m going to say background-color: yellow.


Let’s now set the p elements to be laid out using CSS Grid.

We add display: grid to the div element that contains all the p tags.

We enabled the grid layout, but nothing changed because CSS Grid by default aligns the elements vertically in a single column.


To change that we need to set two columns. So we say grid-template-columns: 200px 200px


So we can also set different sizes, for example, let’s set the first column as 100px, and the second as 200px:


Instead of using pixels, we could also use fractions. Fractions basically divide all the space available into equal fractions. So for example, we can say that I want this layout to have 1 fraction for the first column and 2 fractions for the second. So we expect this to divide all the space available to the div into 3 equal parts, and use it accordingly to our rules, using grid-template-columns: 1fr 2fr;


Enough with the columns.

For rows, it’s different because height is calculated a little bit differently. It doesn’t expand to the full height available. We need to set an explicit height, like this:

div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  height: 400px;


We can also set the gap between each item in the grid, so we can say gap: 20px and this will make a gap between each element in the grid.


Here’s the final demo Codepen.

Note: in the video I use grid-gap to add the gap - it works in the same way as gap, but it’s an old name for that property (please forgive me)

Lessons this unit:

0: Introduction
1: grid-template-columns and grid-template-rows
2: Setting columns and rows dimensions
3: Gap between the cells
4: Span items on multiple columns and/or rows
5: Minimum row width
6: Layout using grid-template-areas
7: ▶︎ DEMO Example: simple grid layout
8: DEMO Example: grid layout with header, sidebar, content and footer