Introduction to Grid in CSS
Before understanding what is grid and how it works, how it is making web development easy let first see how we are creating table, layout and grid structure till now.
So, we have to create a table something like this:
A simple method of creating such a view is by using HTML table tag and we can do this by
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}table, th, td {
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Employee ID</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>100</td>
<td>John</td>
<td>Sale</td>
</tr>
<tr>
<td>101</td>
<td>Jack</td>
<td>Finance</td>
</tr>
</table>
</body>
</html>
Benefits of using table tag is, it is simple to use, UI is responsive and well supported by all browsers.
We can also create a same structure by using div or span tag with the help CSS display property. This is well know and most widely used one. It is followed as we have lots of flexibility over table tag. We can achieve this by writing
<!DOCTYPE html>
<html>
<head>
<style>
div {
white-space: nowrap;
overflow: hidden;
border: 1px solid;
}.container {
border: 1px solid;
}span {
display: inline-block;
width: 33%;
padding: 5px;
border-right: 1px solid;}
</style>
</head>
<body>
<h5>Layout using block/inline-block CSS</h5>
<div class="container">
<div><span>Employee ID</span><span>Name</span><span>Department</span></div>
<div><span>101</span><span>John</span><span>Sale</span></div>
<div><span>201</span><span>Jack</span><span>Finance</span></div>
</div>
</body>
</html>
This is also not that hard but it is tedious as we have to write lots of CSS and also extra effort for handling responsiveness.
Now, lets check out What is Grid?
Grid is a new CSS display value so that we can achieve same layout, table structure in a very simple manner. Lets check out this
<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: auto auto auto;
}div {
border: 1px solid;
text-align: center;
}
</style>
</head>
<body>
<h2>Layout using CSS grid</h2>
<div class="grid">
<div>Employee ID</div>
<div>Name</div>
<div>Department</div>
<div>101</div>
<div>John</div>
<div>Sale</div>
<div>201</div>
<div>Jack</div>
<div>Finance</div>
</div>
</body>
</html>
That simple and you can also see we have linear DOM instead of nested DOM hierarchy. So question is, even if we don’t have nested structure how it is showing table structure?
So it is power of Grid in CSS. If you see carefully we have set display property to grid where all magic happened. It makes tabular structure. We have set grid-template-columns where we have to set how many column it will have with default width. Here, we have set auto 3 times so it creates 3 columns with equal width. So cool!
It reduces lots of development effort by its simplicity and it is responsive also.
This article is just an introduction to Grid and we will cover different grid properties and its usages in next article.
Read my other articles: