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 in 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
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!