Within HTML, a Grid represents a two-dimensional layout that can be established within a webpage. Its purpose is to provide the webpage with a structured layout and to organize the content in a systematic manner, thereby enhancing comprehension.
It is utilized for arranging elements in either horizontal, vertical, or combined orientations. Elements within a grid can be positioned flexibly. A grid comprises cells, with each cell being a square or rectangle. It is composed of rows, which run horizontally, and columns, which run vertically.
Let us know about some terms related to a grid.
- Rows: The lines that are horizontal in a grid layout are called rows.
- Columns: The lines which are vertical in a grid layout are called columns.
- Cell: The intersection of a single-row track and a single-column track is called a cell.
- Gutter: The gap between the columns and rows created with the "padding" CSS property is called a gutter.
- Column lines: The lines between the columns are called the column lines.
- Row lines: The lines between the rows are called the row lines.
- Grid lines: The row lines and column lines defined above are known as grid lines.
Displayed below is a visual representation featuring a 3x3 grid. The diagram includes all the elements previously mentioned for enhanced comprehension.
Gain a thorough understanding of HTML Grid with the aid of practical examples.
Demonstration 1:
In this example, we will create a basic HTML table with five rows.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Grid of 5 rows</title>
<style>
.grid-row {
display: grid;
}
* {
box-sizing: border-box;
}
.grid-row {
border-radius: 5px;
background-color: #f4ece1;
}
.grid-row div {
border: 2px solid #4dffa6;
background-color: #a8ffc8;
color: rgb(7, 98, 26);
padding: 2%;
font-size: 24px;
font-weight: bold;
border-radius: 5px;
height: 90px;
}
</style>
</head>
<body>
<h1>HTML Grid with five rows</h1>
<div class="grid-row">
<div> Row-1 </div>
<div> Row-2 </div>
<div> Row-3 </div>
<div> Row-4 </div>
<div> Row-5 </div>
</div>
</body>
</html>
Output:
The following result displays a basic HTML grid.
Demonstration 2:
In this example, we will create a grid consisting of five columns.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple HTML Grid of 5 columns</title>
<style>
.grid-column {
display: grid;
}
* {
box-sizing: border-box;
}
.grid-column {
border-radius: 5px;
background-color: #f1ede8;
display: flex;
}
.grid-column div {
border: 2px solid #bbff4d;
background-color: #d5fe91;
color: rgb(14, 24, 16);
padding: 3%;
font-size: 24px;
font-weight: bold;
border-radius: 5px;
height: 500px;
}
</style>
</head>
<body>
<h1>HTML Grid with five columns</h1>
<div class="grid-column">
<div> Column-1 </div>
<div> Column-2 </div>
<div> Column-3 </div>
<div> Column-4 </div>
<div> Column-5 </div>
</div>
</body>
</html>
Output:
The output displayed below showcases a straightforward HTML grid consisting of 5 columns.
Demonstration 3:
In this example, we'll be generating an HTML Grid consisting of nine cells and formatting it with CSS classes.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Grid with 9 cells</title>
<style>
.grid {
display: grid;
padding: 15px;
grid-template-columns: auto auto auto;
background-color: #e2f321;
}
.item {
background-color: rgba(255, 255, 255, 0.8);
border: 2px solid rgba(110, 49, 49, 0.8);
text-align: center;
font-size: 24px;
padding: 24px;
}
</style>
</head>
<body>
<h1>HTML Grid with nine cells</h1>
<div class="grid">
<div class="item item-1"> 1 </div>
<div class="item item-2"> 2 </div>
<div class="item item-3"> 3 </div>
<div class="item item-4"> 4 </div>
<div class="item item-5"> 5 </div>
<div class="item item-6"> 6 </div>
<div class="item item-7"> 7 </div>
<div class="item item-8"> 8 </div>
<div class="item item-9"> 9 </div>
</div>
</body>
</html>
Output:
The output displayed below clearly demonstrates a HTML Grid consisting of 9 cells.
Demonstration 4:
In this tutorial, we will showcase an HTML semantic layout grid, consisting of a header, navigation bar, main content section, sidebar, and footer.
Code:
<!DOCTYPE html>
<html>
<head>
<title>HTML Semantics Grid</title>
<style type="text/css">
.grid {
display: grid;
grid-template-rows: 5fr 20fr 5fr;
grid-template-columns: 1fr 5fr 2fr;
grid-gap: 9px;
height: 455px;
font-size: 20px;
font-weight: bold;
}
header {
grid-column-start: 1;
grid-column-end: 4;
}
footer {
grid-column-start: 1;
grid-column-end: 4;
}
.grid * {
background: rgb(0, 255, 102);
align-items: center;
display: flex;
justify-content: center;
margin-right: 2px;
margin-bottom: 2px;
}
</style>
</head>
<body>
<div class="grid">
<header class="item"> Header </header>
<nav class="item"> Nav </nav>
<div class="item content"> Content </div>
<aside class="item"> Aside </aside>
<footer class="item"> Footer </footer>
</div>
</body>
</html>
Output:
The HTML semantics grid is visible in the following output.
Demonstration 5:
In this example, we will create an HTML Grid with additional blank space at its center.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML Grid</title>
<style>
* {
box-sizing: border-box;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(72px, auto);
gap: 9px;
}
.grid div {
border: 2px solid rgb(88, 233, 141);
color: #2d6536;
background-color: rgba(149, 234, 162, 0.5);
border-radius: 5px;
padding: 10px;
font-size: 20px;
font-weight: bold;
}
.item-1 {
grid-row: 1;
grid-column: 1 / 2;
}
.item-2 {
grid-row: 1 / 3;
grid-column: 2 / 4;
}
.item-3 {
grid-row: 2 / 5;
grid-column: 1;
}
.item-4 {
grid-row: 3;
grid-column: 3;
}
.item-5 {
grid-row: 4;
grid-column: 2;
}
.item-6 {
grid-row: 4;
grid-column: 3;
}
p {
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid">
<div class="item-1"> One </div>
<div class="item-2"> Two </div>
<div class="item-3"> Three </div>
<p> Empty Space </p>
<div class="item-4"> Four </div>
<div class="item-5"> Five </div>
<div class="item-6"> Six </div>
</div>
</body>
</html>
Output:
The output displayed below showcases an HTML grid with visible spacing between elements.
Demonstration 6:
In this tutorial, we will create an HTML grid containing 18 cells and enhance its appearance by applying custom styling.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Grid with 18 cells</title>
<style>
body {
margin: 40px;
}
.grid {
background-color: #833636;
color: #f8cccc;
padding: 20px;
border-radius: 6px;
font-size: 24px;
}
.grid:nth-child(even) {
background-color: #f8cccc;
color: #833636;
}
.container {
width: 650px;
display: grid;
grid-template-columns: repeat(6, 90px);
grid-gap: 9px;
grid-template-rows: 90px 90px 90px;
grid-auto-flow: column;
}
</style>
</head>
<body>
<h1>HTML Grid with eighteen cells</h1>
<div class="container">
<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 class="grid"> 10 </div>
<div class="grid"> 11 </div>
<div class="grid"> 12 </div>
<div class="grid"> 13 </div>
<div class="grid"> 14 </div>
<div class="grid"> 15 </div>
<div class="grid"> 16 </div>
<div class="grid"> 17 </div>
<div class="grid"> 18 </div>
</div>
</body>
</html>
Output:
The output displayed below exhibits an HTML grid containing a total of 18 cells.
Conclusion
It can be determined that HTML Grid is a structured layout in two dimensions used to organize content effectively on a webpage.