Design Your Responsive CSS Grid

Do you have any difficulty to build responsive design?

In this article, I'm going to give you a clue that can make your life easier by designing your responsive grid system. Before starting, let me show you what we are going to build:

Maybe you are skeptical about it but look at what we can do with it.

On the desktop:

On tablet:

On mobile :

Now let's start!

I] How it works:

Our responsive grid system uses a series of containers, rows, and columns to layout and aligns content.

Here is an example of a basic skeleton of our web page:

Explanation:

1. Our grid rules are defined in the file css/grid.css.
2. Our container-fluid is the basic layout.
3. Our row is displayed as a grid with 12 columns.
4. large screen: Our articles will be on the same line. The first article will span 4 columns, the second article will span 5 columns and the last article will span 3 columns.
5. middle screen: Our two first articles will be on the same line and the last article will be on the second line because our row is divided into 12 columns. The first article will span 6 columns, the second article will span 6 columns and the last article will span 12 columns.
6. small screen: Our first article will be on the first line, the second article on the second line and the last article on the last line.

Container:

Containers are the basic layout element in our grid. You can use ".container" if you want to set a max-width or ".container-fluid" if you need 100% wide all the time.

Row :

Our row is displayed as a grid with 12 columns and a gap size of 10px.

Columns for each break-point:

1. Small screen:

2. Middle screen :

3. Large screen :

4. Extra-large:

II] Conclusion

As you can see, it is easy to build your responsive grid system. In addition to that, you can add so many break-points as you want or you can also complete this grid CSS by adding typography (font). If you want to check a project using this method, feel free to click on this link: live demo.