How to Create a responsive grid in CSS for your website is essential if you want to show multiple grids to attract the user. So, are you trying to create responsive grid elements?
As you know one size can’t adjust every screen size. Now, the current solution is a responsive grid that will modify based on the size of the screen by bearing a view on a screen. Developers begin to design a website framework for responsive grid requirements. But it might not be difficult as you think to code your own.
How to create a responsive grid in CSS.
So, let’s start to write a few lines HTML code that will help to create a responsive grid.
<div class="grids">
<div class="grid">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
<div class="grid">7</div>
<div class="grid">8</div>
<div class="grid">9</div>
</div>
CSS Code:
html {
font-size: 22px;
}
body {
padding: 1rem;
}
.grid {
background-color: blue;
color: white;
padding: 1rem;
height: 4rem;
font-size:50px;
}
.grids {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
.grids { grid-template-columns: repeat(2, 1fr); }
}
/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
.grids { grid-template-columns: repeat(3, 1fr); }
}
Well, you have all done now a time to check what your grid looks like save your file with the .html extension open this file to your web browser you will see the result.
Read More: Create A Responsive Grid In CSS
Top comments (1)
This could be a bit simpler
grid-template-columns: repeat(auto-fit,minmax(270px,1fr));