So far, we have seen different methods of positioning and styling our web pages like the box layout, the flexbox layout etc. In all of these, we would write the HTML code in the order of our layout and style the CSS according to our design needs and stylistic choices. So what if we could write our HTML code in any order and place them wherever we want to on our web page? This is where grids come in.
So what exactly are grids?
Grids are basically two-dimensional structural layouts of a web page. Grids separate the order of the source HTML code from the way in which it is styled and presented. Say you want to make a website responsive and you need the layout in a different order for the mobile version of your website than the desktop version. Grid allows us to place and style the elements in the order we want to.
Basics terms in grid:
- Grid Lines:
These are lines that make up the grid.
2. Grid Cell:
A grid cell is the single unit of a CSS grid.
3. Grid Area:
A grid area is any area in the grid enclosed between four grid lines.
4. Grid Tracks:
A grid track is a space between two grid lines. The lines can be either vertical or horizontal.
5. Gutter:
Gutter refers to the space between the rows and columns in a grid.
Making our first grid:
Step 1: Make a grid container. For this create a div and inside the CSS, write
display: grid
Now the display of our container is set to grid.
Step 2: Define the rows and columns of the grid. Even though there are various methods to define this, we will stick to the basic method here.
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;What the above piece of code does is define 3 columns and 2 rows each of 150px each.
Now let’s add some gutter to it.
grid-gap: 1rem;The above adds 1rem of space between the rows and columns of the grid.
Now we go to our HTML container and add six divs inside it.
Here’s what the code looks like:
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
</div>Now let’s add the CSS part:
.container {
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 150px 150px;
grid-gap: 1rem;
}Here’s what the end result looks like:
Now that we have created our first grid let’s take a look at some of the units we use in a grid.
The Fr unit:
Earlier we used px as the unit for our grid. But that isn’t very efficient to use. That’s where the Fr unit comes in. Fr is short for fraction. What it means is the fraction of space is available in our grid.
Now we create the grid using the Fr unit:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 150px;What the above piece of code does is create a grid with 3 columns of width 1 fr each. It means that whatever is the width of the container, it will be divided into 3 columns of width 1 fr each. We can also switch up the ratio. Take a look at this example:
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 150px 150px;The repeat() notation:
Take a look at the above code we wrote. We wrote “1fr” three times for specifying three columns. In situations like these where we find ourselves the need of repeating ourselves, we use the repeat() notation. Take a look at this code:
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 150px);This gives the same result as our initial code but the notation makes it easier for us to write the code.
Positioning in a grid:
Consider the above grid. It has 3 columns and 2 rows. The numbers are called “grid lines”. So if there are 2 columns in a grid, there will be 3 grid lines for it.
Here the grid has 3 columns, so it has 4 grid lines column-wise.
It has 2 rows, so it has 3 grid lines row-wise.
It is very important for us to understand the concept of grid lines while positioning any element in a grid because it is by using these lines that we specify where the element should be placed.
Now let’s define a container in HTML containing six divs in it:
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Say we want item1 to occupy the first 2 columns and the first row of our grid. For that we use the following CSS code:
.item1 {
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 3;
}This will position item1 in the first 2 columns and the first row of our grid. Notice that grid lines are used to specify where the element begins and ends both row and column-wise.
Shorthand property:
We can also write the above CSS code using the shorthand notation given below:
.item1 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}Creating a basic layout:
We have learned the basics of creating a grid. But when it comes to the actual use, the grid is used to position different parts of the layout of a web page.
For example, this is a basic layout:
Let’s start by writing the basic HTML code :
<div class="container">
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="content-1">Content-1</div>
<div class="content-2">Content-2</div>
<div class="content-3">Content-3</div>
<div class="footer">footer</div>
</div>Here we have defined a class “container” with six divisions inside it.
Now let’s define the CSS code of the grid:
.container {
display: grid;
width: 750px;
height: 600px;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 1fr 100px;
grid-gap: 1rem;
}Now let’s place the divisions of the container in the grid areas:
.header {
grid-row: 1 / 2;
grid-column: 1 / 4;
}
.sidebar {
grid-row: 2 / 4;
grid-column: 1 / 2;
}
.content-1 {
grid-row: 2 / 3;
grid-column: 2 / 4;
}
.content-2 {
grid-row: 3 / 4;
grid-column: 2 / 3;
}
.content-3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
.footer {
grid-row: 4 / 5;
grid-column: 1 / 4;
}Opening this code on a browser will give us the above layout.
Grid Template Areas:
Now that we have seen how to place different items in a grid using the grid lines, let’s take a look at another method:
Another method for positioning items is to use named grid areas with the grid-template-area and grid-area properties. The best way to explain this is with an example. Let's recreate the grid from our previous example with the grid-template-areas property:
.container {
display: grid;
width: 100%;
height: 600px;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 80px 1fr 1fr 100px;
grid-gap: 1rem;
grid-template-areas:
"header header header"
"sidebar content-1 content-1"
"sidebar content-2 content-3"
"footer footer footer";
}Here we have defined three columns and four rows. Instead of placing each individual item, we can define the entire layout using the grid-template-areas property. We can then assign those areas to each grid item using the grid-area property.
Now let’s add these areas to our HTML code to specify the grid template areas:
<div class="container">
<div class="header">header</div>
<div class="sidebar">sidebar</div>
<div class="content-1">Content-1</div>
<div class="content-2">Content-2</div>
<div class="content-3">Content-3</div>
<div class="footer">footer</div>
</div>Now adding the rest of the CSS:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content-1 {
grid-area: content-1;
}
.content-2 {
grid-area: content-2;
}
.content-3 {
grid-area: content-3;
}
.footer {
grid-area: footer;
}Rendering the above code in a browser will give us the same layout we made with the last code.
This is just the basics of grids, there are a lot more that we can do with it.
Thanks for reading.
