In the last post, we discussed the basic idea behind grid system. Also we talked about the concept of CSS at-rules and we have said that we will be using the '@media' rule to make the grid system responsive. In this post, we will start by building the grid system.
One thing to keep in mind that in all the rules that we will be creating, we will use percentage for content width, padding and margins. The grid system that we will create will have 12 columns. This means that the smallest column width will be 100/12 = 8.33% and the maximum will be 100%. The given values will change later when we apply margins to the columns and rows.
Creating Required Selectors
Our grid system will have the following components:
- A Container
- A Row
- 12 columns
CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
*, *::before,*::after{
box-sizing:border-box;
}
.container{}
.row{}
.col-1{}
.col-2{}
.col-3{}
.col-4{}
.col-5{}
.col-6{}
.col-7{}
.col-8{}
.col-9{}
.col-10{}
.col-11{}
.col-12{}
Creating Test HTML Page
Now we have the needed selectors, we will start writing the needed rules inside each one. But before we do that, let’s create HTML document that we will be testing our grid system in. The page will have 3 sections, header, footer and a body. Each component of the 3 will be represented as a row within a container similar to the next image.
The HTML code for the given layout can be found below.
HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<!--The CSS file that will contain the grid system-->
<link href="grid-system.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!--Page Header-->
<div class="row">
Header
</div>
<!--Page Body-->
<div class="row">
Body
</div>
<!--Page Footer-->
<div class="row">
Footer
</div>
</div>
</body>
</html>
One thing we have included is the CSS file that we will be writing the code for the grid system in. In our case, we have given it the name "grid-system.css". When we view the given HTML document in a web browser, we will see the following:
Inside the header row, we will have other components such as search bar, breadcrumb and page title. The page body row will contain the content that the user will be interested in viewing. The footer usually contains links to pages such as “About” and “Terms of Service”.
Working With the Row and Container Selectors
As we have seen, When we view the test document in web browser we will see a blank page with only the text we have added. To make the container and row visible, we will add colors to them using CSS.
CSS Code
1
2
3
4
5
6
7
8
.container{
background-color: #672E3B;
}
.row{
background-color: #92B558;
}
After setting background colors, the only thing that we will see is the color of rows. The reason for that is the container will be behind the rows. To see the container, we have to specify the value of padding property within the container. Let’s set it to 1%.
CSS Code
1
2
3
4
5
.container{
background-color: #672E3B;
padding:1%;
}
When we apply the given CSS rules, we will be able to see the rows and the container.
One issue we can notice is that the rows look like as if they were connected. To fix that, we have to specify the value of the property margin for the row. Let’s make the margin 0.5%.
CSS Code
1
2
3
4
5
.row{
background-color: #92B558;
margin:0.5%;
}
Once we do that, the rows will be separated from each other.
When we look at the whole web page in the browser window, we can see that the page will fit without any issues. Even if we resize the whole window, we can see that the page will fit. If everything is fine, why do we have to bother our self with creating grid system? Well, a simple answer to that question is we will not see the difference unless we have many other elements in the page such as images, menus, search boxes and others. In the given page, we have only text which cannot affect the layout of the page that much. Also when we try the page on a smartphone, we might notice a difference.
Now let’s continue the work on our grid system. After specifying the padding, we will specify the width of the rows and container. We will set it to 100%.
CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
.container{
background-color: #672E3B;
padding:1%;
width:100%;
}
.row{
background-color: #92B558;
margin:0.5%;
width:100%;
}
When we view the page in the web browser, we can notice something. The rows are off the container by some pixel.
Fixing that issue is simple. As we remember, the total width of an element is 100% including the content, border, padding and margin. Since the property “box-sizing” is set to “border-box”, the total width of each row will be 100% + margin = 100% + 1% = 101% which is greater than the container size (100%). To fix that, we reduce the width property of the row to 99% to add place for the margin. The correct width should be 99%. Keep this rule in mind, the total width of an element = 2*margin + width property value if the "box-sizing" property is set to "border-box". The 2 is to consider the margin on the left side and the right side. Since the container has no margin, we don’t have to change its width.
CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
.container{
background-color: #672E3B;
padding:1%;
width:100%;
}
.row{
background-color: #92B558;
margin:0.5%;
width:99%;
}
Once we set the width of the row to 99%, every thing will look good as it should be.
This is the end of this part. In the next post, we will be working with the columns. Once we finish that, our rigid grid system will be fully ready for use in big screens.
