UNDERSTANDING GRID TEMPLATE COLUMN IN CSS USING SIMPLIFIED EXAMPLE

The CSS grid property is part of the CSS layout property used to arrange boxes about its viewport. We have several CSS layout properties: flexbox, CSS grid, positioning, float etc. But in this article, we will be talking about CSS grid property.
CSS grid layout is a two-dimensional system that allows us to position items into rows and columns simultaneously.

Fig 1: A typical grid example
But Flexbox which is a very popular CSS layout outside the CSS grid is a one-dimensional layout system that allows us to position items either on rows and columns, but not both.

Fig 2: A typical flex column example (one-dimensional)

Fig 3: A typical flex row example (one-dimensional)

From the image above flex image, you can see that it can’t be arranged into both rows and columns like the CSS grid.

Now, that we have an idea of what a CSS grid is, let’s go deeper. To work with CSS grid, you can either use grid template columns or you can use grid-template-areas.

In this article, we will be dealing with grid-template-columns.
Grid-template-columns is a CSS grid property that specifies the number of columns in a grid layout as well as the width of the columns.
A demo of how you will see CSS grid-template columns.

Grid-template-columns: auto auto auto
grid-template-columns: repeat (5, 1fr)
grid-template-columns: 20% 80%

The first example allows us to adjust the width or size of a grid container according to the width of the content and it has 3 columns

The second example stands for a fractional unit which represents a fraction of the available space in the grid container and repeat() notation which helps us to repeat the 1fr 5 times instead of calling it out into 5 places (1fr 1fr 1fr 1fr 1fr). So since we have the 1fr into 5 places. i.e a total fractional unit of 5, each one is going to split 1/5 of the remaining spaces.

The third example is creating two columns with the first column occupying 20% of the grid container, and the second column occupying 80% of the grid container.

Before we look at our first real example, let’s know what grid line mean; grid lines refer to the lines that define the grid columns and rows; In our image below we have 4 columns and 5 rows, but 5 vertical grid lines which determine our columns and 6 horizontal grid lines which determine our rows.

Fig 4: A breakdown of grid.

We will get a better view of what grid lines means in our example below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid template columns</title>
    <link rel="stylesheet" href="grid.css" />
  </head>
  <body>
    <div id="content">
      <div class="one">1</div>
      <div class="two">2</div>
      <div class="three">3</div>
      <div class="four">4</div>
      <div class="five">5</div>
      <div class="six">6</div>
    </div>
  </body>
</html>

Output

Fig 5: output without grid

The above is the output without the styling, so we can want to arrange this numbers into the horizontal and vertical form like the way a proper website will look like

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#content {
  color: white; //to make the text color white
  margin: 10px; //a margin of 10px around the body
  text-align: center; //to position the text at the center of each background
  display: grid; //to display it in a grid format
  grid-template-columns: repeat(5, 1fr); // to create 5 columns of 1fr and this automatically has 6 grid lines
  grid-auto-rows: minmax(100px, auto); // these specifies the size of an implicit created grid row track or pattern of 100px. But if the size of the row is greater than 100px then use auto

  grid-gap: 10px; //these specifies the gap between each column and row
}

/* what this mean is, make all the even number background blue */
#content div:nth-child(even) {
  background: blue;
}

/*and the ones who are not even number background, give them this color*/
#content div {
  background: rgb(255, 0, 242);
  width: auto;
  padding: 40px;
}

.one {
  grid-column: 1/4;
  grid-row: 1/3;
}
.two {
  grid-column: 4/6;
  grid-row: 1/3;
}
.three {
  grid-column: 1/6;
}
.four {
  grid-column: 1/3;
}
.five {
  grid-column: 3/6;
}
.six {
  grid-column: 1/6;
  grid-row: 5/7;
}

Fig 6: output in desktop view

Fig 7: output in mobile view

A breakdown of each line of code from .one to .six

.one {
  grid-column: 1/4; //this means to take a vertical grid line of 1-4 which is columns 1 to 3
  grid-row: 1/3; //this will take a horizontal grid line of 1-3 which is 2 row
}

.two {
  grid-column: 4/6; //it means from grid line 4 to grid line 6. Which is the 2-column
  grid-row: 1/3; this will be occupying horizontal grid lines 1 to 3, which is 2 row
}

.three {
  grid-column: 1/6; //occupying from grid line 1 to grid line 6, which will be occupying 5 column
}

.four {
  grid-column: 1/3; //occupying grid line 1-3, which is 2 column
}

.five {
  grid-column: 3/6; //occupying grid line 3 to 6 which is 3 column
}

.six {
  grid-column: 1/6; //occupying from grid line 1 to grid line 6 which is the 5 column
  grid-row: 5/7; //occupying from grid line 5 to grid line 7 which is 2 rows
}

In a situation where the grid line is not stated like .three, .four, and .five, it takes one row

Conclusion

We talked about what a grid is, and how it is different from flex, we talked about grid-template-columns, and we also talked about grid lines and how They relate to grid columns and rows. Your grid line is one more than the number of columns and rows. i.e if your column is 5, your grid line is 6, the same if your row is 4, your grid line is 5.

Please feel free to follow me for more content, post your comment and questions, and follow me on Twitter and Linkedln

Blog

UNDERSTANDING GRID TEMPLATE COLUMN IN CSS USING SIMPLIFIED EXAMPLE

Joshua

Join Our Newsletter. No Spam, Only the good stuff.

Related