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>
Alright, first you need to copy or write the above code into your text editor or anywhere you want to do. and then write below responsive CSS code to style and color our grids.
<style>
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); }
}
</style>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.
If you want to add more columns then you just need to put an <div> into your HTML before closing the first </div>. After that, adjust the width for a responsive view in @media media query CSS. let’s suppose if you want to add 4 columns then you need to add a single div before the closing first then in the CSS replace in @moible media query width 33.33333% to 25%.