How to create a 3X3 grid using CSS

Introduction:

In this tutorial, we will see how to create a simple 3X3 grid by using CSS grid.

This is a basic 3X3 grid layout. I should also mention here, that this is only an example of 3X3 grid layout. It is not responsive.

Demo:

3X3 grid Source Code:

<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<title>3X3 Grid Demo - CodeHasBug</title>
		<meta name="description" content="This is a demo of how to create 3x3 grid in CSS" />
		
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
		
		<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="32x32" />
		<link rel="icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" sizes="192x192" />
		<link rel="apple-touch-icon" href="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
		<meta name="msapplication-TileImage" content="https://codehasbug.com/wp-content/uploads/2021/06/gblogo.png" />
		<style>
			.header	.custom-logo{
				width: 140px;
				height: auto;
			}
			.spacer{
				position: relative;
				height: 80px;
			}
			
			/******************
			*	Main style start here
			******************/
			.grid-box{
				display: grid;
				grid-gap: 20px;
				grid-template-columns: repeat(3, 1fr);
				margin-bottom: 40px;
			}
			
			.cell{
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0px 2px rgb(0 0 0 / 7%), 0 5px 6px rgb(0 0 0 / 16%);
				height: 200px;
				background-color: #ffe186;
			}
		</style>
		
	</head>
	<body>
		<div class="container">	
			<div class="row">
				<div class="col-12 mt-5 text-center">
					<h1>3X3 Grid Demo</h1>
				</div>
			</div>
			
			<div class="row mt-3">
				<div class="col-12">
					
					<div class="grid-box">
						<div class="cell"> Cell 1 </div>
						<div class="cell"> Cell 2 </div>
						<div class="cell"> Cell 3 </div>
						<div class="cell"> Cell 4 </div>
						<div class="cell"> Cell 5 </div>
						<div class="cell"> Cell 6 </div>
						<div class="cell"> Cell 7 </div>
						<div class="cell"> Cell 8 </div>
						<div class="cell"> Cell 9 </div>
					</div>
				</div>
			</div>
			<div class="spacer"></div>
		</div>
		
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
	</body>
</html>

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment