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;
  }
}

Output

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: [e-mail]

Comments

[JoelBonetR 🥇]

Nice initial approach!

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

[margishpatel]

Thanks for your valuable feedback. 💯

[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.

[margishpatel]

Thanks for your valuable feedback. 😍

[kaushikantala]

Well Written!!

[margishpatel]

Thanks for your valuable feedback. 💯

[margishpatel]

Thanks for your comments.

[spO0q]

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

[margishpatel]

Right. 💯 ✅

[adriens]

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

[margishpatel]

I try my best, Thanks.

[margishpatel]

I updated my blog with Output you can check it.

[adriens]

Yes, and the GFis just perfect 👌

[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.

[margishpatel]

Thanks for your feedback, 😊 I try my best.

[margishpatel]

I updated my blog with Output you can check it.

[Diego Ramiro]

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

[artydev]

Thank you

[margishpatel]

Thanks for your comments.

[xKx]

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

[margishpatel]

Thanks for your valuable feedback.

[tim roberts]

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

[margishpatel]

I updated my blog with Output you can check it.

[margishpatel]

Thanks for your valuable feedback.

[Faisal Jawed Khan]

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

[margishpatel]

Thanks for your feedback.

I updated my blog with Output you can check it.