How to Make a Grid System Using HTML & CSS Only

Hello viewer, in this article I will teach you how to create A SIMPLE FLUID GRID SYSTEM Using HTML & CSS Only. If you don’t know about grid then i will explain you what is grid and how to used it grid layout is very popular for creating a responsive web layout. when you create a grid layout. first thing in your mind what is grid system so I will tell you what is grid system. The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. In this article I make a simple grid system you can see on below image. 

Create a Responsive Website Using Flexbox | Flexbox Website

in this article. I will not you explain all about of grid because grid is not a small topic. in future may be i will post grid system in detail. in this article. I will explain you how to use grid system in your web page and how to make a responsive layout helping of grid system.

How to Make Floating Panel Animation in HTML

this grid layout I will explain you how to be divided row inside section. so, let’s start the coding.

Here is HTML code

<!DOCTYPE html>
<html>
<head>
	<title>Fluid Grid System</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="wrapper">
	<div class="row">
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
		<div class="col-1"></div>
	</div>
	<div class="row">
		<div class="col-2"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
		<div class="col-2"></div>
	</div>
	<div class="row">
		<div class="col-3"></div>
		<div class="col-3"></div>
		<div class="col-3"></div>
		<div class="col-3"></div>
	</div>
	<div class="row">
		<div class="col-4"></div>
		<div class="col-4"></div>
		<div class="col-4"></div>
	</div>
	<div class="row">
		<div class="col-6"></div>
		<div class="col-6"></div>
	</div>
	<div class="row">
		<div class="col-5"></div>
		<div class="col-7"></div>
	</div>
	<div class="row">
		<div class="col-2"></div>
		<div class="col-8"></div>
		<div class="col-2"></div>
	</div>
	<div class="row">
		<div class="col-2"></div>
		<div class="col-9"></div>
		<div class="col-1"></div>
	</div>
	<div class="row">
		<div class="col-2"></div>
		<div class="col-10"></div>
	</div>
	<div class="row">
		<div class="col-1"></div>
		<div class="col-11"></div>
	</div>
	<div class="row">
		<div class="col-12"></div>
	</div>
</div>


</body>
</html>

Here is CSS Code

.html,body{
  min-height: 100%; background-color: #e25f7e;
}
.wrapper{max-width: 1200px; margin: 0 auto 1.5em; padding: 15px; background-color: white;}
.row{margin-top: 7px; padding: 7px;}
.row:after{display: table; clear: both; content: "";}
.row [class^=col-]{
  float: left;
  min-height: 50px;
  margin-left: 2.08%;
  background: #eea4b5;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}
.row [class^=col-]:nth-child(2n+1){
  background-color: #e25f7e;
}
.row [class^=col-]:first-child{margin-left: 0;}
.row .col-1{width: 6.4%;}
.row .col-2{width: 14.9%;}
.row .col-3{width: 23.4%;}
.row .col-4{width: 31.9%;}
.row .col-5{width: 40.2%;}
.row .col-6{width: 48.9%;}
.row .col-7{width: 57.4%;}
.row .col-8{width: 65.9%;}
.row .col-9{width: 74.4%;}
.row .col-10{width: 82.9%;}
.row .col-11{width: 91.4%;}
.row .col-12{width: 100%;}

@media screen and (max-width: 768px){
  .row{margin-top: 0;}
  .row [class^=col-]{
    width: 100%;
    margin-top: 2.08%;
    margin-left: 0;
  }
}

Watch a video tutorial how to create A SIMPLE FLUID GRID SYSTEM Using HTML & CSS Only

One thought on “How to Make a Grid System Using HTML & CSS Only

  • October 26, 2022 at 11:38 am
    Permalink

    Hey, I think your site might be having browser compatibility issues. When I look at your blog site in Safari, it looks fine but when opening in Internet Explorer, it has some overlapping. I just wanted to give you a quick heads up! Other then that, excellent blog!

    Reply

Leave a Reply

Your email address will not be published.