Let’s learn about the most exciting thing to come to front end web layout in a long time. That is the technology of CSS Grid. CSS Grid is a brand new set of technologies that allows web designers and developers to incorporate powerful page layout techniques on the web. Traditionally, page layout of the web has been an extremely challenging practice. In the past we may have used tables, divs, layers, all kinds of CSS hacks, and ultimately CSS Frameworks like Foundation, Bootstrap, and others. Now we have CSS Grid, a very powerful two-dimensional layout tool for positioning items on web pages. You can create just about any layout you can think of with CSS Grid. Let’s take a look at some examples of how CSS Grid works now.
Grid Container
The first thing we want to do is to set up a grid container. We do this by setting the display property to grid. Any direct children of a defined grid container are now automatically grid items.
display: grid;
<html>
<head>
<style>
.grid-container {
display: grid;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>display: inline-grid;
<html>
<head>
<style>
.grid-container {
display: inline-grid;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>Explicit Grid
Once we have the container set up, columns and rows can be explicitly defined using the grid-template-rows and grid-template-columns properties.
grid-template-rows
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 50px 75px;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="1.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="6.png">
</div>
</body>
</html>
