HTML Layout Using Grid

In the previous article, you have learned about flex-box layout. You can create a grid like structure in HTML page using flex-box. In a grid like structure all blocks would be equal sized. But that involves adjusting each box using flex. The HTML and CSS has a different display property just for a grid layout. In this article, you will learn to create an HTML page with grid layout.

Advertisements
Advertisements

Example: HTML Grid Layout

In this section, we will be creating a simple grid layout with 6 product image and their captions. You will also use HTML 5 semantic elements to create the page.

HTML and CSS Code for Product Page

<!DOCTYPE html>
<html>
<head>
    <title>HTML Grid Layout - Product Page</title>
	<meta charset="utf-8">
	<style>
	  #main-title,#footer {
	    width:80%;
		margin:auto;
		padding:2%;
		text-align:center;
		background: #282828;
		color: #ffffff;
	  }	  
	 #main-area{
	  width: 80%;
	  margin:auto;
	  padding:2%;
	  display:grid;
	  grid-template-columns:1fr 1fr 1fr;
	  background:lightgray;	 
	 }
	.img-product{
	
	 height:auto;
	 background:lavender;
	 padding:2%;
	 text-align:center;
	}
	.img-product a:hover {
	   box-shadow: 5px 10px 5px #282828;
	}
	</style>
</head>
<body>
<header id="main-title">
<h1>Our Products</h1>
</header>
<main id="main-area">
   <figure class="img-product" id="box-1">
   <a href="#"><img src="images/pencils.jpg" width="100%"></a>
   </figure>
   <figure class="img-product" id="box-2">
   <a href="#"><img src="images/uniform.png" width="100%"></a>
   </figure>
   <figure class="img-product" id="box-3">
   <a href="#"><img src="images/football.png" width="100%"></a>
   </figure>
   <figure class="img-product" id="box-4">
   <a href="#"><img src="images/umbrellas.jpg" width="100%"></a>
   </figure>
   <figure class="img-product" id="box-5">
    <a href="#"><img src="images/books.jpg" width="100%"></a>
   </figure>
   <figure class="img-product" id="box-6">
   <a href="#"><img src="images/shoes.jpg" width="100%"></a>
   </figure>
</main>
<footer id="footer">
<p>our-products©-2010-2017-All Rights Reserved</p>
</footer>
</body>
</html>

Output To Browser – Product Grid

Output - HTML Grid Layout
Figure 1 – Output of HTML Grid Layout

Advertisements

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.