Responsive layout with CSS Grid (no media queries)

One of the things almost every developer is scared of in the programming world is CSS (Cascading Style Sheets). CSS is very important in the world of programming because it makes user interfaces look good. This is why there are so many frameworks built to abstract the bulky code and make things easier. Also to speed up development time. As an up-and-coming developer, I did not learn CSS well enough, so I always used frameworks like Tailwind and Bootstrap to develop my projects. But fast-forward to when I started working as a front-end developer and was required to use pure CSS to style web pages and bring Figma designs to life with very high accuracy. I had to go deeper into CSS and discovered it was not as bad as advertised.

In this short article, I will show you how to build a fully responsive layout using a CSS grid in three (3) lines of code. No media queries, no Flexbox, just CSS grid. Amazing right? Let's dive in:

So let's say you want to build a layout to display products for an e-commerce website, and you need it to be responsive on various devices. The usual approach would be to do something like this:

.main{
     display: flex;
     flex-direction: row;
     gap: 1rem;
     flex-wrap: wrap;
}


@media only screen and (max-width: 700px){
.main{
     flex-direction: column;
}

The problem with this is that, using flex-wrap, anytime a component is wrapped to another line, it takes up 50% of the available width, or it is centralized. which doesn't look good. And you will need to specify the width of each of the item in the main container because that is what flexbox algorithm uses to know if the width of the items plus the space between them is more than the viewport width, then it pushes the item to the next line. This is where grid comes in. With CSS grid, you don't need to specify the width of the items to display. It calculates it for you based on the content found in each item and fits the item automatically in different columns. With CSS grid, this is what it looks like:

.main{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 1rem;
}

That is all! All the magic happens with the grid-template-columns section.

What goes on behind the scene

• The repeat() function receives two parameters, first one is the amount of times you want to repeat a - column.
• auto-fit decides how many columns should be repeated based on the viewport width and content of the displayed items.
• minmax() function is the second argument passed to the repeat function for the width of the column. 280px being the minimum width, and 1 fractional unit if there is enough space.

So with all this, each column is responsive and the auto-fit decides how many columns to create. This leads to a smooth layout.

Live demo: codepen sample

After all being said, flexbox and grid system are both unique in their own way and are used in different context. Choose wisely. Thank you for reading.