An introduction to CSS Grid
In this post, we are going to cover all the basics of the CSS grid layout feature.
Relatively, this is a new feature of CSS which is supported by all browsers. CSS grid feature allows us to create two-dimensional layouts on a web page and align items in both columns and rows.
Flex vs Grid
So, what is the difference between flexbox and grid? Flexbox is great only for one-dimensional operations. It is for one-dimensional layouts in columns and rows. On the other hand, Grid is a two-dimensional layout system.
As we see from the figure above, in flexbox there are some columns and these columns are aligned in a row. On the other side, Grid layout lets us work with rows and columns at the same time. Flexbox is designed for layout in one dimension -either a row or a column. Grid allows us to work with rows and columns concurrently.
Declaring the Grid
Let’s define our first grid container. All we need to do is type display: grid to our CSS file. We just enable the grid feature.
As you will notice nothing changes on your web page. It is because we have more things to do. Our next step is declaring rows and columns of our new born grid. Creating columns is easy, all we need to do is pass the sacred words and that isgrid-template-column . All right, Columns are done, what’s next now? The next is adding some pixels to the columns.
grid-template-columns: 200px 200px; For now our grid has two equal columns with a width of 200 pixels. We can stretch or shrink the width of the columns by increasing or decreasing the amount of the pixels or we can add more measurement units to add more columns to our grid.
grid-template-columns: 200px 200px 2fr 1fr;
As you see, we add two more measurement units to the grid and it is fraction(fr). So what this fraction thing is? Let’s say we have a two-columns defined grid. One of column size is 1fr and the other one is 2fr. Second one will be twice the size of the first column. It is recommended to use fraction over the percentages or pixels. Now we have a grid with 4 columns. It’s the time to add some rows to it.
To create rows it’s almost the same thing, we use the grid-template-rows property.
grid-template-rows: 300px 200px;
We have a grid with four columns and two rows. Let’s put all the code together and add some CSS properties to our code to make it easier to understand.
This is the code we wrote together so far;
<!DOCTYPE html>
<html lang=”en”>
<head>
<style>
#container {
display: grid;
grid-template-columns: 200px 200px 1fr 2fr;
grid-template-rows: 300px 200px;
}
#container div{
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<div id=”container”>
<div style=”background-color: tomato;”>column:1(200px) row:1(300px)</div>
<div style=”background-color: rebeccapurple;”>column:2(200px) row:1(300px)</div>
<div style=”background-color: royalblue;”>column:3(1fr) row:1(300px)</div>
<div style=”background-color: yellowgreen;”>column:4(2fr) row:1(300px)</div>
<div style=”background-color: blueviolet;”>column:1(200px) row:2(200px)</div>
<div style=”background-color: chocolate”>column:2(200px) row:2(200px)</div>
<div style=”background-color: crimson;”>column:3(1fr) row:2(200px)</div>
<div style=”background-color: burlywood;”>column:4(2fr) row:2(200px)</div>
</div>
</body>
</html>I run the code and that is the output of that code. Don’t tell me that the code is not working.
Gap Property
All is good. Let’s add a gap to the grid. All we need to do is pass the grid-gap: 1em; This CSS property sets the gaps (gutters) between rows and columns. If we would like to specify gaps for rows and columns individually, then we just need to use grid-row-gap: em; and for setting the gap between columns we use the grid-column-gap: 5px; property.
Positioning Items by Line Number
We can use line-based placement to control where these items sit on the grid.
The column properties of line-based placement are; grid-column-start and grid-column-end. grid-row-start and grid-row-end are the properties of the row.
To explain this property with less suffering, I would like to use the grid we have created in this blog post. Let’s say we want to expand the blue box (column:3/row:1) horizontally and stretch it all the way(column:4/row:1). To do this we need to pass the grid-column-start: 3; and grid-column-end: 5;
We will do the same thing for the tomato box. The only difference is we will stretch it vertically. We need to use row properties to make that happen. CSS code will be like; grid-row-start: 1; and grid-row-end: 3;
The code(some CSS code included) and its result is shown below.
.
.
.
#tomato{
grid-row-start: 1;
grid-row-end: 3;
}
#blue{
grid-column-start: 3;
grid-column-end: 5;
}
</style>
</head>
<body>
<div id="container">
<div id ="tomato" style="background-color: tomato;">column:1(200px) row:1(300px)</div>
<div style="background-color: rebeccapurple;">column:2(200px) row:1(300px)</div>
<div id ="blue" style="background-color: royalblue;">column:3(1fr) row:1(300px)</div>
.
.
.I added two CSS classes called blue and tomato to make changes individually. We don’t have to specify start and end properties separately; They can be represented as shown below.
grid-row:1/3;
grid-column:3/5;Now Lets see together the effect that we made on our grid layout.
Because of the expanding operations we have two more boxes which are appended to end of the grid layout. So, when you play with the grids, mind these extra boxes and their effects on your layout.
That is all for this blog post. Hope you enjoy it.
References
