Recap
In the last post, we started working on the grid system after we understood the idea behind it. The work that we did so far is only for two selectors, the row and the container. Now that we have the container and the row setup, we can start working on the columns. Note that we might need to add more rules for the row and container later.
Working on The Columns Selectors
The first thing that we have to specify is the padding within each column. To do that, we have to add new selector as follows:
The selector [class*=”a_sub_string”] is used to apply rules to a set of class selectors with the name of the class containing the string “a_sub_string”. When we add this rule, each column will have 0.5% padding. After specifying the padding, we will apply a coloring to all the columns to make them visible.
CSS Code
[class*='col'] {
padding:0.5%;
background-color: #b3ffb3;
}
Now, let’s modify our HTML document to include two columns in the body. Both columns will have the same width. Since we divide the row into two columns, each one will take 50% of the total row width. This means we will use the ‘col-6’ class selector that we wrote in part 3.
HTML Code
<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">
<!--col-1 will have the minimum width-->
<!--col-12 will have the maximum width-->
<div class="col-6">Column 1</div>
<div class="col-6">Column 2</div>
</div>
<!--Page Footer-->
<div class="row">
Footer
</div>
</div>
</body>
</html>
Before we continue with how to specify the width of each column in the grid, let’s see the result of our work till now.
Hmm…, something is not correct. The first problem is that each column is in top of the other like a row. The other problem is that the body row has disappeared. To make the column act as a column, we have to specify the value of a property called ‘float’. This property is used to specify where to place the element in its parent container. Depending on the language the website uses, the column might float left or right. Since English language is left to right, we will make the columns float left.
CSS Code
[class*='col'] {
padding:0.5%;
background-color: #b3ffb3;
float:left;
}
After setting the value of this property, the HTML document will look like this:
Well, the columns ‘look like’ columns but we still have other issues. As we can see, the columns are connected with each other and the body row is still not visible. Also the footer is in the same place as the columns. In order to separate the columns, we have to specify the margin for each column, and in order to make the row visible, we have to set the property padding of the row. Let’s set the row padding to 0.5% and the margin of the columns to 0.5%.
CSS Code
.row{
background-color: #92B558;
padding:0.5%;
margin:0.5%;
width:98%;
}
[class*='col'] {
padding:0.5%;
margin:0.5%;
background-color: #b3ffb3;
float:left;
}
After adding the given properties to our CSS file, the HTML document should be look like this in the browser:
We have got new problems but fixed the previous ones. The first one is that the columns are outside the row and the second one is the columns have incorrect widths. To fix the first issue we need to set the value for the property “float” for the row and the container. We make both float to the left. Once we do that, the columns will fit within the row.
The final step before we test what we did is to specify the width of each column in the grid. As we have said before, the grid that we will be building will have 12 columns. Assuming that the total available width is 100%, each column will have a width of 100/12 = 8.333333333% which is the minimum possible width which will be col-1 width. The next column (which is col-2) will have width of col-1 + 8.333333333%. The idea is to increase the width by 8.3333333333% each time we move to the next column.
CSS Code
.col-1{
width:8.333333333%;
}
.col-2{
width:16.66666667%;
}
.col-3{
width:25%;
}
.col-4{
width:33.33333333%;
}
.col-5{
width:41.66666667%;
}
.col-6{
width:50%;
}
.col-7{
width:58.33333333%;
}
.col-8{
width:66.66666666%;
}
.col-9{
width:75%;
}
.col-10{
width:83.33333333%;
}
.col-11{
width:91.66666666%;
}
.col-12{
width:100%;
}
When we test the result in the web browser, we will see a problem as follows:
As we can see, the second column has moved down. The issue we have here is related to margin of each column. Remember that the margin of the columns is set to 0.5%. This means that 1% of the total width has been used for the margin. In order to fix this problem, we subtract 1% from the width of each column to add space for the margin. So, the correct width of each column will be as follows:
CSS Code
.col-1{
width:7.333333333%;
}
.col-2{
width:15.66666667%;
}
.col-3{
width:24%;
}
.col-4{
width:32.33333333%;
}
.col-5{
width:40.66666667%;
}
.col-6{
width:49%;
}
.col-7{
width:57.33333333%;
}
.col-8{
width:65.66666666%;
}
.col-9{
width:74%;
}
.col-10{
width:82.33333333%;
}
.col-11{
width:90.66666666%;
}
.col-12{
width:99%;
}
Once we update the width of the columns, the two columns will fit within the body row.
To make sure that what we did so far is 100% correct, we will be creating multiple rows within the body and add columns inside each row. Note that it is possible to add columns inside rows and rows inside columns (sub-dividing).
HTML Code
<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">
<div class="row">
<div class="col-12">100%</div>
</div>
<div class="row" >
<div class="col-6">50%</div>
<div class="col-6">50%</div>
</div>
<div class="row" >
<div class="col-3">25%</div>
<div class="col-3">25%</div>
<div class="col-3">25%</div>
<div class="col-3">25%</div>
</div>
<div class="row" >
<div class="col-1">8.33%</div>
<div class="col-1">8.33%</div>
<div class="col-1">8.33%</div>
<div class="col-3">25%</div>
<div class="col-3">25%</div>
<div class="col-3">25%</div>
</div>
<div class="row" >
<div class="col-11">90%</div>
<div class="col-1">10%</div>
</div>
</div>
<!--Page Footer-->
<div class="row">
Footer
</div>
</div>
</body>
</html>
The result of the given HTML code will be like the next image if we view it in FireFox web browser for desktop.
What we just did is a fixed grid system. If we would build a website using the given grid, it will look 100% perfect in a big screen. In the next post, we will make the grid fluid (or responsive).
The full CSS Code that we wrote thus far can be downloaded from here.
