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-colum
n 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)
Nice initial approach!
I also like the
grid-template-areas
feature in certain use-cases πThanks for your valuable feedback. π―
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.
Thanks for your valuable feedback. π
Nice post, would you share a little video showing how the responsive works in real life ?
I try my best, Thanks.
I updated my blog with Output you can check it.
Yes, and the GFis just perfect π
Well Written!!
Thanks for your valuable feedback. π―
Thanks for your comments.
grid has simplified CSS significantly. Really nice evolution. Besides, CSS seems more readable this way.
Right. π― β
Thank you
Thanks for your comments.
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.
I updated my blog with Output you can check it.
WOW \o/, I didn't expect that, I really appreciate it and again congrats for the post man !!!
Thanks for your feedback, π I try my best.
Nice Work! π
Thanks for your valuable feedback.
A good website is an absolute foundation in SEO
Thanks for your valuable feedback.
That"s good work bros.
Thanks for your valuable feedback.
Very well explained, I found it useful and liked it
Thanks for your valuable feedback.
some sample images would be helpful to illustrate the @media queries--showing how to best expose the other columns of the grid
I updated my blog with Output you can check it.
Thanks for your valuable feedback.
Great post, short and simple but I am expecting that you show visuals before and after using grid.
Thanks for your feedback.
I updated my blog with Output you can check it.
Awesome! I am still learning Grid and this is such a helpful article to read.
Thanks for your valuable feedback.
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