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>Notice when we set display to grid, the items appear as stacked rows which span the whole width of the container. We have some images here with numbers as an example. You can see the grid lines as we have turned them on in Firefox for easy visualization.
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>In the case of display being set to inline-grid, notice the grid items only span the width of the content.
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>Here, the first row explicitly has a height of 50 pixels, and the second row has a height of 75 pixels. All other rows simply use the height of the content they contain. In our case this is 100px by 100px images.
grid-template-columns
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 100px 100px 100px;
}
</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>Now we have 2 rows and 3 columns all with an exact height and width of 100 pixels.
fr in grid-template-rows and grid-template-columns
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
</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>Fractional units are a great way to let the browser automatically divide up the free space into equal parts. This example shows two rows of equal parts, and three columns of equal dimensions. The images are only 100px by 100px, so they begin to the left in each grid cell by default.
Minimum and Maximum Grid Track Size
You can use the minmax() function to create grid tracks that use the available space, but that don’t shrink narrower than a defined size or grow beyond a defined size.
The minmax() function
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: minmax(100px,150px) 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
</style>
</head>
<body>
<div class="grid-container">
<img src="200x200.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="200x200.png">
</div>
</body>
</html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto);
}
</style>
</head>
<body>
<div class="grid-container">
<img src="200x200.png">
<img src="2.png">
<img src="3.png">
<img src="4.png">
<img src="5.png">
<img src="200x200.png">
</div>
</body>
</html>
By combining minmax() and fr units, one can create all kinds of responsive designs that no longer need to make use of multiple media queries in the browser.
Repeating Grid Tracks
Rather than having to explicitly define every single row or column, you can use the repeat() function to say how many rows or columns you would like.
The repeat() function
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
</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">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
Gutters With Grid Gap
By default there is no space at all between rows and columns. You can define whitespace between rows and columns using grid-gap. Note that you can not apply any styling to gutters. These are only for white space.
grid-gap
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
</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">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 5px;
grid-column-gap: 20px;
}
</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">
<img src="7.png">
<img src="8.png">
<img src="9.png">
</div>
</body>
</html>
Positioning Items Using Grid Line Numbers
What makes CSS Grid very powerful is the ability to place content exactly where you want it. Here are a few examples of positioning images in precise locations on the grid.
grid-row-start(end) grid-column-start(end)
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.a {
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
</style>
</head>
<body>
<div class="grid-container">
<img class="a" src="1.png">
<img class="b" src="2.png">
<img class="c" src="3.png">
<img class="d" src="4.png">
<img class="e" src="5.png">
<img class="f" src="6.png">
</div>
</body>