Learn to Create Responsive Websites With Grid System

Creating a CSS grid system

The CSS grid system is based on splitting the layout into columns and rows. Using the grid layout module is the easiest way to design responsive websites. The grid layout usually consists of 12 columns but can have more.

The following example creates a simple CSS grid system. Here are the main steps:

• Set display: grid.
• Set sizes of rows and columns with grid-template-columns and grid-template-columns.

.example {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
div {
border: solid 2px green;
padding: 5px;
margin: 3px;
}

Tip: change the size of the window in the example to see that the CSS grid system responds and adjusts the sizes of columns and rows.

The next example creates a different responsive CSS grid:

.example {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444; 
}

div {
  background-color: purple;
  color: #fff;
  border-radius: 10px;
  padding: 25px;
  font-size: small;
}

CSS grid vs flexbox

There are several major differences between CSS grid view system and flexbox:

• Grid layouts are two-dimensional systems. This idea means that the grid works with rows and columns. However, flexbox is one-dimensional and works either with columns or rows.
• Grid is great for creating big-scale layouts, while the flexbox is better for small-scale ones.
• Grid is layout-oriented, and flexbox is content-oriented. If you are unsure about the content of the website, you should choose grid (flexbox if you do).
• For defining columns or rows, you should work with flexbox. However, when you need to create a grid and fit content into two dimensions, the grid is the answer.

Note: you can combine the use of CSS grid system and flexbox for the best results.

CSS grid vs bootstrap

It is possible to use both CSS grid module and Bootstrap for creating the layout of your page. However, we recommend that you consider using the grid before turning to Bootstrap. Here are the reasons why:

• Grid code is easier to maintain as the HTML and CSS remain separate. Bootstrap wraps each row in <div> and uses multiple classes.
• Changing the layout in the grid is easy as you do not need to change the HTML code. Flexibility increases once you add media queries.
• Bootstrap offers a layout of 12 columns. Grid lets you create as many rows and columns as you like.

Note: the faster option is to use Bootstrap since the necessary code is provided to you. However, to manipulate the layout more, you should use the CSS grid module.

A list of properties for the grid

Here is a CSS grid cheat sheet of properties that control the way web page layout looks:

Building a layout without grid

In order to create a layout, you have to set the box-sizing property to border-box for all HTML elements. It confirms that borders and padding are included in the total dimensions of these elements.

* {
    box-sizing: border-box;
}

The next example shows a simple responsive website that consists of two columns:

.firstC {
 width: 60%;
 float: left;
 border: solid #a4508b 5px;
 padding: 10px;
}

.secondC {
 width: 40%;
 float: left;
 border: solid #2f004f 5px;
 padding: 10px;
}

The following example creates a responsive layout that has five columns.

Firstly, you have to specify the width of every column. We go for 25% / 25% / 25% / 25% / 100%.

Then, you create a CSS class for every column.

.C-1 {width: 25%;}
.C-2 {width: 25%;}
.C-3 {width: 25%;}
.C-4 {width: 25%;}
.C-5 {width: 100%;}

In the next example, we make all the columns (C-) float to the left, and add 5px padding:

[class*="C-"] {
 float: left;
 border: solid #a4508b 5px;
 padding: 5px;
}

You also need to create a separate <div> for each row. Every row must have all 5 columns summed up:

<div class="row">
  <div class="C-1">...</div>
  <div class="C-2">...</div>
  <div class="C-3">...</div>
  <div class="C-4">...</div>
  <div class="C-5">...</div>
</div>

The columns in a row float to the left and are not affected by the normal flow of the page. However, other elements would be misplaced because of the flow. Therefore, we have to create a style to clear it:

.row::after {
    content: "";
    clear: both;
    display: table;
}

Finally, we add some styles and colors to make the website look more inviting:

html {
 font-family: "Arial", sans-serif;
}

.back-up {
 background-color: #ced4da;
}

.back-up :hover {
 background-color: #a4508b;
}

.back-down {
 background-color: #858585;
}

CSS grid responsive: useful tips

• The CSS grid is not a framework. It is a built-in feature of CSS and is supported by all modern browsers.
• A CSS grid track refers to space between any two lines on the grid.
• The repeat() function helps to handle grids with many tracks by repeating all or a section of the track listing.