Grid rows and columns

In this topic, we're going to learn about the grid-template-rows and grid-template-columns properties in CSS.

These properties are an essential part of working with the CSS Grid layout and will help you achieve exciting complex layouts. For instance:

• Present images in rows, similar to how they appear in Google Photos

• Create a tile layout from Netflix

• Build a news website with different sizes of containers and sidebars, like The Guardian

We'll go over the syntax, and walk through some examples of how to use them. Let's get started!

Creating your first grid

So how do we create a grid, exactly?

Well, a grid is made out of rows and columns. It is logical, then, that to create one we must first specify the number, size, and distribution of columns and rows in the grid.

We can do this using the grid-template-columns and grid-template-rows properties.

The grid-template-columns property defines the columns in the grid, while the grid-template-rows property defines the rows. Both properties take a list of values that establish the size of each column or row in the grid. Here's how to use them In practice.

First, we need to decide which element we want to use as the parent container. Let's create a pair of div tags in our document.

<div class="grid">
  <div>Column 1</div>
  <div>Column 2</div>
  
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Then, in your CSS file, give it a display: grid; property, border, and background-color property so you can see the block-level elements:

.grid {
  display: grid;
  border: 1px black solid;
  background-color: rgb(159, 220, 247);
}

You'll see that nothing has happened yet. The divs render as standard block-level elements, as you'd expect.

The grid-template-columns

In the next example, we will demonstrate how to rearrange the grid into two separate columns. This is simply achieved with the grid-template-columns property. The grid-template-columns property is a property specifying the number (and the widths) of columns in a grid layout. Meaning, as soon as we add the grid-template-columns property, the grid layout will kick in. Let's say that we want our columns to be 500 pixels wide and split into two columns. In order to do that, let's apply two times 500px the value to the grid-template-columns property:

.grid {
  display: grid;
  border: 1px black solid;
  background-color: rgb(159, 220, 247);
  grid-template-columns: 500px 500px;
}

Now we can see our grid take shape in the output down below:

As you can see, we have two columns that are 500px wide.

The grid-template-rows

Just like you can control the width between the columns, you can also control the height of the rows. In this section, we will demonstrate how to control the height of our rows with the grid-template-rows property. The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. Like so:

.grid {
  display: grid;
  border: 1px black solid;
  background-color: rgb(159, 220, 247);
  grid-template-columns: 500px 500px;
  grid-template-rows: 150px 150px
}

Adding the grid-template-rows property and specifying the height makes our rows 150 pixels high each.

Values

You can also use other values besides pixel sizes to define the size of the columns and rows. For example, you can use auto to have a column or row size automatically adjust to the size of its content, or you can use percentages to specify a size relative to the size of the grid container.

For example:

.grid {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-template-rows: 400px 400px;
}

This gives us an asymmetrical grid that dynamically stretches across the parent container horizontally, with rows that are 400px high.

Note, that when you use the % unit, you specify that a row or column should take up a certain percentage of the available space in the grid container.

For example, if you have a grid container with three rows, and you specify that the first row should have a size of "25%", the second row should have a size of "25%", and the third row should have a size of "50%", then the first two rows will each take up 25% of the available space, and the third row will take up 50% of the available space.

Another unit you can use is called the fr unit. When you use the fr unit, you specify that a row or column should take up a certain fraction of the available space in the grid container. It is particularly useful when you want to divide the available space in the grid container into equal or proportional parts.

fr units help us to create a flexible and responsive grid layout. They're also useful when we want to give more or less space to certain rows or columns based on their relative importance, without having to worry about the actual size of the grid container.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
}

In this case, the two rows will each take up 1/2 of the available space in their parent container, which gives us this output:

There are other values you can give to these properties, but they are more situational:

• auto: the size will be determined by its container and the dimensions of the content.

• none: default value, columns, and rows will be created if needed

• max-content: the size of each column or row will be based on the largest item in the column

• min-content: the length of each column or row will be based on the smallest item in the column

• initial: sets this property to its default value

• inherit: this property will be inherited from the parent element

In most cases, sticking to length units like pixels, percentages, and em units is a safe bet. And by using percentage values, you can begin to create adaptive layouts. This will work for simpler elements, like text blocks, which will conform to the width of the user's screen or window.

Conclusion

That's it for our topic on the grid-template-rows and grid-template-columns properties in CSS! In this topic, we covered the basic layout that is commonly used while building a website. We learned how to use these properties to define the structure of a grid layout, and specify the number and size of the rows and columns. You learned about different values you can use with the various grid properties. Now, let's put it to the test!