How to create a responsive grid in CSS
How to Create a responsive grid in CSS into 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 couldn’t adjust every screen size. Now, the modern solution is a responsive grid that will change based on the size of the screen by taking a view on a screen. Many developers start to design a website framework for a responsive grid requires. But it might not be difficult as you think to code your own.
So, let’s start to write a few line HTML code that will help to create a responsive grid.
<div class=”wrapper”>
<div class=”grid”><h1>Welcome to this website</h1></div>
<div class=”grid”><h1>Welcome to this website</h1></div>
<div class=”grid”><h1>Welcome to this website</h1></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 coloring to our grids.
<style>
/* Mobile first */
.grid {
float: left;
width: 100%;
}
/* Responsive column widths */
@media (min-width: 700px) {
/* For Mobile three grid */
.grid {
width: 33.33333%;
}
}
.wrapper {
margin-bottom: 60px;
}
.wrapper:before,
.wrapper:after{
content: ‘ ‘;
display: table;
clear: both;
}
/* Main Style Begin’s */
.grid {
background-color: #8f1558;
color: white;
padding: 50px;
box-sizing: border-box;
moz-box-sizing: border-box;
text-align: center;
}
.grid:nth-child(3n — 2) {
background-color: #54158f;
}
.grid:nth-child(3n) {
background-color: #8a0e37;
}
<style>
Well, you have all done now a time to check how your grid looks like save your file with .html extension open this file to your web browser you will see the result.
If you want to add more column then you just need to put a <div> into your HTML before closing the first </div>. After that, adjust the width for a responsive view in Media query CSS. let 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 Media query width 33.33333% to 25%. How was your experience let me know in the comment? Good luck
