DEV Community

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

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

margishpatel on April 07, 2023

To make your HTML responsive using display grid, you can follow these steps: Define the grid container: First, define the container element that w...
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
 
artydev profile image
artydev

Thank you

Collapse
 
margishpatel profile image
margishpatel

Thanks for your comments.

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
 
spo0q profile image
spO0q 🐒🎃

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

Collapse
 
margishpatel profile image
margishpatel

Right. 💯 ✅

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
 
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
 
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
Muazu 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
xKx

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

Collapse
 
digitalstudium profile image
digitalstudium

Interesting post. Will try to create grid page. Thank you!

Collapse
 
margishpatel profile image
margishpatel

Thanks for your feedback, 😊 I try my best.

Collapse
 
parth51199 profile image
parth51199

Amazing Tutorial 😍

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback. 😊

Collapse
 
mahavirhalvadiya profile image
Mahavir Halvadiya

Great post! Thank you so much. I really need these tips

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback. 💪😍

Collapse
 
qms85 profile image
Jonathan Peters

Great article... Brief and straight to the point

Collapse
 
margishpatel profile image
margishpatel

Thanks for your valuable feedback.

Some comments have been hidden by the post's author - find out more