How to make your HTML responsive using display grid. 💯✅
source link: https://dev.to/margishpatel/how-to-make-your-html-responsive-using-display-grid-1fj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
52 9 5 4 6
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-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.
👋Hey there, Let’s connect on:
Linkdin: Margish Patel
Twitter: @margish96patel
Email: [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK