Build A Responsive Grid System
Posted By : Prachi Ahuja | 24-May-2018
There are some series of steps to build the grid system:
1. Choose a spec
2.Set box-sizing to border-box
3.Create a container for grid
4.Calculate column width
5.Determine positions of the gutter
Most of the steps are straightforward once we go through the description of these steps.
Step 1: Choose a spec
While choosing a spec we have three options-
-CSS Grid
-Flexbox
-CSS floats
CSS grid is the best option for creating grids. Every browser hides this layout behind a flag.
And considerations for using Flexbox and Floats are same.
Step 2: Set box-sizing
Box-sizing property alters the CSS box model which is usually used by browsers for calculating width and height properties.
Step 3: Create a container for grid
It must be required to create a container to determine the maximum width of the grid.
.container {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
Step 4: Calculate column width
If using floats to create columns and gutters we have five properties to go along with.
-width
-margin-left
-margin-right
-padding-left
-padding-right
Here,
We create columns by using width and gutters by using margin and padding.
We have taken a maximum width of 1170px and it means that each column is 390px(1170 ÷ 3). It will work great at viewport larger than 1170px but breaks at the smaller viewport.
.three-col-grid .grid-item {
width: 380px;
float: left;
}
So here we can go with giving width in percent so it will work great in smaller viewports too.
.three-col-grid .grid-item {
width: 33.33333%;
float: left;
}
But here comes one more case, if all the child elements are floated then the container's height gets collapsed. To solve the issue we can do-
.three-col-grid:after {
display: table;
clear: both;
content: '';
}
Step 5: Determine positions of the gutter
Here are some possible ways to create gutters these are:-
1.One-sided(margin)
2.One-sided(padding)
3. Double-sided split equally(margin)
4. Double-sided split equally(padding)
Method-1
.grid-item {
margin-right: 20px;
float: left;
}
Here if we need columns in percent and margin in pixels we can't do so with two different units.
It can be done by using CSS calc function.
.grid-item {
width: calc((100% - 20px * 2) / 3);
}
.grid-item:last-child{
margin-right:0;
float:right;
}
Method-2
.grid-item {
padding-right: 20px;
float: left;
}
.grid-item:last-child{
padding-right:0;
float:right;
}
Method-3
.grid-item {
margin-right: 10px;
margin-left: 10px;
float: left;
}
.grid-item {
width: calc((100% - 20px * 3) / 3);
margin-right: 10px;
margin-left: 10px;
float: left;
}
Method-4
.grid-item {
width: 33.3333%;
padding-right: 10px;
padding-left: 10px;
float: left;
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prachi Ahuja
Prachi is a UI Developer having knowledge of HTML5, CSS3, Javascript, Jquery. She is dedicated towards her work.Her hobbies are drawings/paintings and writing articles.