DEV Community

Cover image for How to make your HTML responsive using display grid. 💯✅
margishpatel
margishpatel

Posted on • Updated on

How to make your HTML responsive using display grid. 💯✅

To make your HTML responsive using display grid, you can follow these steps:

Define the grid container: First, define the container element that will hold your grid using the display: grid property. This will enable the grid layout.

Set the grid template columns and rows: Next, set the grid template columns and rows using the grid-template-columns and grid-template-rows properties. These properties allow you to specify how many columns and rows the grid should have, as well as their size and spacing.

Place grid items: After defining the grid template columns and rows, you can place your grid items using the grid-column and grid-row properties. These properties allow you to specify which cells your items should span across.

Use media queries: Finally, to make your grid responsive, you can use media queries to adjust the grid layout based on the screen size. You can use the @media rule to set different grid properties at different breakpoints, such as changing the number of columns or their size.

Here's an example code snippet that demonstrates how to create a simple responsive grid layout:

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 20px;
}

.item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .container {
    grid-template-columns: 1fr;
  }
}
Enter fullscreen mode Exit fullscreen mode

Output

Image description

In this example, the .container element is set to display: grid and has three columns with a gap of 20px between them. The .item elements are placed within the grid using the grid-column and grid-row properties.

Then, two media queries are used to adjust the grid layout at different screen sizes. When the screen size is less than or equal to 768px, the grid is set to have two columns instead of three. And when the screen size is less than or equal to 480px, the grid is set to have only one column. This allows the grid to adapt and remain responsive on different devices and screen sizes.

Hope you like it.

That’s it — thanks.

To read my other articles click here.

What is Flexbox : A Beginner's Guide to Flexbox CSS Layouts


👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: babariyamargish97@gmail.com

Top comments (44)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Nice initial approach!

I also like the grid-template-areas feature in certain use-cases 😁

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback. 💯

Collapse
 
karlkras profile image
Karl Krasnowsky

Thanks for your post.
Man I miss grid. I'm working with a group that insists on sucking on the teat of material ui for page layout which while "convenient", imo, makes a mess of code and is the definition of over engineering. Better to actually learn and apply base css standards like grid to increase supportability and removing the need to learn/rely on a 3rd party library for features literally built into the browser stack.

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback. 😍

Collapse
 
adriens profile image
adriens • Edited

Nice post, would you share a little video showing how the responsive works in real life ?

Collapse
 
margishpatel profile image
margishpatel

I try my best, Thanks.

Collapse
 
margishpatel profile image
margishpatel

I updated my blog with Output you can check it.

Collapse
 
adriens profile image
adriens

Yes, and the GFis just perfect 👌

Collapse
 
kaushikantala profile image
kaushikantala

Well Written!!

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback. 💯

Collapse
 
margishpatel profile image
margishpatel

Thanks for your comments.

Collapse
 
jmau111 profile image
jmau111⚡⚡⚡

grid has simplified CSS significantly. Really nice evolution. Besides, CSS seems more readable this way.

Collapse
 
margishpatel profile image
margishpatel

Right. 💯 ✅

Collapse
 
artydev profile image
artydev

Thank you

Collapse
 
margishpatel profile image
margishpatel

Thanks for your comments.

Collapse
 
diegogirao profile image
Diego Ramiro

Great post , simple and straight to the point, Congrats 👏 !!!!

I was expecting to see the results as a visual example. I would like to see an image or a GIF that shows the results.

Collapse
 
margishpatel profile image
margishpatel

I updated my blog with Output you can check it.

Collapse
 
diegogirao profile image
Diego Ramiro

WOW \o/, I didn't expect that, I really appreciate it and again congrats for the post man !!!

Collapse
 
margishpatel profile image
margishpatel

Thanks for your feedback, 😊 I try my best.

Collapse
 
arashjangali profile image
Arash Jangali

Nice Work! 👏

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
gamerseo profile image
Gamerseo

A good website is an absolute foundation in SEO

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
bin_jabbal profile image
Mu'azu S. Ahmed

That"s good work bros.

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
kaushikantala profile image
kaushikantala • Edited

Very well explained, I found it useful and liked it

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
timobertsusa profile image
tim roberts

some sample images would be helpful to illustrate the @media queries--showing how to best expose the other columns of the grid

Collapse
 
margishpatel profile image
margishpatel

I updated my blog with Output you can check it.

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
faisaljawedkhan profile image
Faisal Jawed Khan

Great post, short and simple but I am expecting that you show visuals before and after using grid.

Collapse
 
margishpatel profile image
margishpatel

Thanks for your feedback.

I updated my blog with Output you can check it.

Collapse
 
tinkersdev profile image
Fuascailt

Awesome! I am still learning Grid and this is such a helpful article to read.

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Collapse
 
margishpatel profile image
margishpatel

Thank you for your comment on my recent blog post. Your feedback was incredibly helpful, and I wanted to let you know that I've made some updates to the content based on your suggestion. 😊

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more