html

How to build a responsive grid view from scratch?

When designing a web page aligning the elements in proper positions is of great importance along with making them responsive which means that they will alter their behavior depending upon the different types of devices displaying the web page. One way to perform both the aforementioned tasks is by building a grid view system. Here in this write-up, we will guide you step-by-step regarding how to make a responsive grid view from scratch.

Before jumping towards its construction, let’s explore what a grid view actually is.

What is a Grid View?

A grid view is a technique that partitions a web page into various columns that makes the positioning of elements easier. A grid view, that is responsive in nature, typically consists of 12 columns along with a 100% width and scales up and down depending upon the size of the web browser.

Now let’s see how to build a responsive grid view from scratch.

Building a Responsive Grid View

Below we have demonstrated the step-by-step procedure of constructing a responsive grid view.

Prerequisite

Before jumping towards coding you need to sketch out the grid view on paper so that you know exactly where to place which element. For instance, here is the sketch of the grid view that we are going to build.

Now that we have our sketch, let’s begin the coding part.

Step 1

The basic necessity to make a web page responsive is to add a responsive meta tag in your HTML file.

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The width=device-width attribute means that the web page width will change in correspondence to the width of the device, whereas, initial-scale=1.0 attribute means when the web page is loaded by the browser for the first time the zoom level will be 1.

Step 2

Add some HTML elements that you want to display on the web page.

HTML

<div class="header">

<h1>Linux Hint</h1>

</div>

To add content in our header section we are making a div container and wrapping our heading inside this container.

HTML

<div class="container">

<div class="col-3 sidebar">

<ul>

<li>About Us</li>

<li>Authors</li>

<li>Published Articles</li>

<li>Categories of Articles</li>

</ul>

</div>

<div class="col-9 main">

<p>All about programming languages!</p>

<p>Here you will find well- written, and well-structured articles related to all programming languages composed by our refined authors.</p>

</div>

</div>

For the purpose of inserting content to the sidebar we have made a div with class names “col-3 sidebar” and nested an unordered list inside it. As far as the main section is concerned we have added two paragraphs and nested them inside another div with class names “col-9 main”. Both the div elements are further nested in a larger div with the class name “container”.

The classes assigned to the nested div elements will be explained later on.

Step 3

Now we are done with our HTML part and now move on to our CSS part of the code. The first thing that needs to be done in the stylesheet is to set the box-sizing property of HTML elements to border-box.

CSS

* {

box-sizing: border-box;

}

The reason behind this is that this property includes the padding and border in total height and width of HTML elements.

Step 4

Now let’s convert our page into a responsive grid view of 12 columns. In order to do this we have to perform certain calculations to provide certain widths to each column and gain control over the web page when it comes to arranging the elements.

The width of a single column = 1/12th of the total screen width= 100%/12= 8.33%.

The width of two columns combined = 2/12th of the total screen width= 2(100%)/12= 16.66%

The width of three columns combined = 3/12th of the total screen width= 3(100%)/12= 25%

The width of four columns combined = 4/12th of the total screen width= 4(100%)/12= 33.33%

And so on.

CSS

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

The width of all the columns have been defined in the CSS.

Note:

We wanted to place our sidebar and main section in two columns. A grid view with two columns looks something like this.

When we look at the widths of the various columns in the code above we find out that three columns will have 25% width, and nine columns will have 75% width. Therefore, the div that nests the menu list has been assigned the .col-3 class, whereas, the div with the content of the main section has been given .col-9 class.

Step 5

Now using the class “.col-”, let’s provide some padding to the columns and float them to the left.

CSS

[class*="col-"] {

float: left;

padding: 10px;

}

The float:left property places these columns to the left of the container holding them so that text and other inline elements will wrap inside the columns. However, this will position the elements as if the columns are not there at all. Therefore, we have to clear the flow. To do so, follow the code snippet below.

CSS

.container::after {

content: "";

clear: both;

display: table;

}

The :after class and the content property is used to add content after the container. Meanwhile, the table value of the display property will make the content appear in the form of a table i.e in rows and columns.

Step 6

.header {

background-color: bisque;

color: white;

padding: 20px;

}

.sidebar ul {

margin: auto;

padding: 0px;

}

.sidebar li {

padding: 10px;

margin-bottom: 10px;

background-color: rosybrown;

color: white;

}

Lastly we are now styling our elements using the classes assigned to the div containers of the header, and sidebar.

Output

The web page has been shown at random screen widths.

This is our web page at 1250px.

Our web page at the width of 600px.

Conclusion

To build a responsive grid view you need to first sketch the layout that you want your web page to have then divide your page into various columns. For instance, in the example used in this article, we divided our page into 12 columns by calculating the percentage of each column. Afterward, you can use that percentage to place your elements accurately across various columns. In this guide, we have shown you a step-by-step procedure to build a grid view from scratch.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.