CSS Grid: Responsive Cards without Media Query
CSS Grid makes working with a responsive design much easier and straightforward. On this blog, I will try to demonstrate how we can use the full potential of CSS Grid to come up with responsive cards without the need to use Media Queries.
First and foremost let’s declare the continuing div display to flex.
Our cards are setup and as you can see it on the browser they are all block element spanning the entire row. But what we actually want to achieve is that on a desktop view we want three cards to be displayed in a row. On a tablet view we want two cards per row and on mobile view one card in a row.
To achieve this we first have to assign grid-template-columns property to the container div. The grid-template-columns property will help divide the rows in to columns.
In the above stylesheet we added grid-template-columns property and we set it to repeat(3, 1fr), this is the same to grid-template-columns: 1fr 1fr 1fr. This rule will force the row to have three columns and each card will contain one fraction of the screen size. Depending on our specific needs we can repeat the amount of columns we need in our layout, for this specific demo we will have tree columns.
This is a step ahead to achieve our objective but we still have more to do. The problem with this grid is that even the screen size gets smaller the cards will still span one fraction of the space available.
The first step we need to take to prevent this from happening is instead of one fraction we need to declare the exact width of the cards.
Firefox has advanced feature when debugging CSS Grid so I highly recommend to user firefox developer console when working with CSS Grid.
As you can see the cards they are being restricted to 300px width but the problem now is that there is extra space left in the screen and the cards are not using the space available. In order to force the cards to span across the size of the screen but restrict width to a certain minimum width, we will user a CSS Grid property called minmax. The minmax property enables us to set the minimum and maximum width a column width within a screen size.
The cards are spanning across the entire screen size and they are being restricted to shrink down once they reach the minimum width of 300px. This is good but so far we did not achieve our purpose to make the cards responsive. Right after the cards reach the minimum of 300px we want a new row to be created and the cards need to be stacked in order.
You will now witness the power of CSS Grid and see how easy it is to make responsive layouts. To achieve full responsive design all we have to do is that instead of setting the number of column to three columns we need to set it auto-fit. As simple as that.
Now when the minimum card width is reached a new row will be added and all the cards will be stacked bellow. I was impressed by the power of CSS Grid when it comes to responsive design and hopefully you will use it on your next project if you are not using it so far.
You can check my simple todo project I developed to practice CSS Grid using the link below. I will also link the Github repo for the project if you want to use it as reference. I used SASS and I organized my CSS in 7–1 CSS architecture, if you are familiar with the architecture it will not be difficult to explore all the different SASS files in the repo. If you are not familiar with 7–1 CSS Architecture, I will leave a link to a tutorial below.
Todo Project: https://todosample.netlify.com/
Github: https://github.com/yone920/todo-frontend
7–1 CSS Architecture: https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture
