Building a Responsive Grid System Using CSS: Part 2

Hello everyone. This is the second part on the series that will teach you how to build a responsive grid system for your website using CSS. In the previous post, we discussed the reasons that could lead to building a grid system. Also we reviewed some basic concepts related to CSS Box Model. In this post, we will be discussing the basic idea behind grid system. Also we will be talking about new concept in CSS which is the At-Rule

The Idea behind Grid System

For sure you know the meaning of the word ‘grid’. It is basically a set of intersecting vertical and horizontal lines. It is used to divide the page into rows and columns. Same idea applies in web development. We use CSS to divide the page into rows and columns. In web development, there are two types of grid systems, one is called ‘fixed’ and the other is ‘fluid’. The fixed does not change the width and height regardless of screen size. On the other hand, the fluid will adapt to different screen sizes. What we will be doing is to build a fluid grid system (Known as responsive grid). In order to build a fluid grid, we will have to use percentage to specify the content width and margins.

Web Page Grid System

As we have said before, the first step in building the responsive grid system is to divide the page into rows and columns. To illustrate this, let’s take a look at the next picture.

In the given picture, we have something called ‘container’. We can think of it as a simple ‘div’ element. Inside the container, we have a grid system that consists of 3 rows. Each row has 4 columns at most and 2 columns at least. If we would use percentage to represent the width of each column in the first row, each column will take 25% of the row width. In the second row, one column will take 75% of the width and the other one 25%. In the last row, each column will take 50% of the row width. We can notice that in each case, the percentage will sum up to 100% for each row. Similar to the container, we can think of each row and column as a ‘div’ element

If we would implement the given grid system in CSS, It will be as it is in all screens, 4 columns in the first row, 2 columns in the second and last column if it is fixed. But what if we would like from the grid to display well in small screens? The idea is simple. We have to make the width of the columns to adopt to different screen sizes. We have to think about large, medium and small screens. To do that, we have to learn about new concept called CSS At-rule.

CSS At-Rules

An At-rule is simply a CSS statement that starts with the character '@'. There are two types of At-rules, conditional (or nested) at-rules and non-conditional at-rules. The non-conditional at-rules end with a semi-colon. One example of such as rule is the '@charset' rule. The conditional at-rules will include a block of CSS statments that will only apply to HTML document if the condition is true. An example of such at-rule is the '@media' rule. The '@media' rule is one of the most important at-rules as it is used to check the size of the screen that the website is displayed on. We will learn later how to use it to make our grid system responsive.

CSS Code

1 2 3 4 5 6

@charset 'UTF-8';
/* 
    The @charset rule must be the first thing appear in css file.
*/

CSS Syntax Highlighter and Formatter

In the next post, we will start by building a fixed grid system. Later on, we will use the @media rule to make the grid system responsive.