Grid layout allows defining grids in CSS and placing items into grid cells. That means you don't have to specify each track and every item manually. Grids are flexible enough to adapt to their items and this is all thanks to so-called explicit and implicit grids. In this topic, we will cover explicit and implicit grids, the main differences between them, and their usage. Let's get started!
Explicit grid
An explicit grid is a manually defined grid. This means you can define a fixed number of lines and tracks of lines and tracks that form a grid by using the grid-template-rows, grid-template-columns, and grid-template-areas properties. Let's take a look at the example of the explicit grid that we defined manually:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid">
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
<div class="item-4">Item 4</div>
</div>
</body>
</html> In the styles file, we added a background-color property to the item class so we can see the containers and their behavior in the grid clearly. In order to make an explicit grid, we defined the display, grid-template-areas, grid-template-rows, and grid-template-columns properties:
.grid {
text-align: center;
display: grid;
grid-template-areas:
"item-1 item-2 item-3 item-4";
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-gap: 20px;
}
.item-1 {
grid-area: item-1;
background-color: rgb(215, 181, 246);
}
.item-2 {
grid-area: item-2;
background-color: rgb(215, 181, 246);
}
.item-3 {
grid-area: item-3;
background-color: rgb(215, 181, 246);
}
.item-4 {
grid-area: item-4;
background-color: rgb(215, 181, 246);
}The grid-template-columns property specifies the width of each column in the grid using the fr (fractional unit) value. A 1fr unit is a flexible unit that distributes the available space evenly among the column tracks, ensuring that they take up an equal amount of horizontal space within the grid container. The grid-template-rows property specifies the height of each row in the grid, with two rows each having a height of 100 pixels. We also define the grid areas using grid-template-areas. This property defines the template areas for the grid. In this case, we define a single row with four columns, each with a unique area name: item-1, item-2, item-3, and item-4. We use the grid-area property to assign each grid item to a grid area.
In the output, you can see the explicit grid:
With grid-template-columns: 1fr 1fr 1fr 1fr; we made four vertical tracks each with a width of 1fr. We can automate that by using the repeat() notation like this: grid-template-columns: repeat(4, 1fr);. The first argument specifies the number of repetitions, and the second a track list, which is repeated that number of times.
Auto-fitting explicit grid
With an explicit grid, you can also auto-fit tracks into the grid container. The auto-fill keyword creates as many tracks as can fit into the grid container without causing the grid to overflow. With auto-fill, you can create a dynamic grid. Let's check it out the example.
Here, we will make each column 100px wide. We achieve this with the grid-template-columns, repeat, and auto-fill properties. Also, we will set the grid-gap to 20px so you can see the columns:
.item{
background-color: rgb(215, 181, 246);
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: 100px 100px;
grid-gap: 20px;
}The code output:
Implicit grid
An implicit grid is an explicit grid with additional implicit tracks and line forms. This means if you have more grid items than cells in the grid or when a grid item is placed outside of the explicit grid, the grid container automatically generates grid tracks by adding grid lines to the grid. When you define a grid using CSS Grid Layout, you can specify the number of rows and columns that you want the grid to have.
The size and position of the grid items placed into the implicit grid are determined by the grid-auto-rows and grid-auto-columns properties, which specify the size of the rows and columns in the implicit grid. You can also use the grid-auto-flow property to control how the grid items are placed into the implicit grid, either in rows or columns.
To demonstrate the implicit grid we will use the same HTML file, but we will make some changes to the styles file in order to make an implicit grid:
.item{
background-color: rgb(215, 181, 246);
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
max-width: 800px;
}
.item:first-child {
grid-column-start: -1;
}
.item:nth-child(2) {
grid-row-start: 4;
}The code output now looks like this:
As you can see, there is quite a difference between the two outputs. The widths and heights of the implicit tracks are set automatically. They are only big enough to fit the placed grid items, but it’s possible to change this default behavior.
In previous topics, you've learned that the grid-auto-rows and grid-auto-columns properties give us control over the size of rows and columns in the grid. This example will show you how to control the size of the implicit tracks:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-columns: 200px;
grid-auto-rows: 60px;
max-width: 800px;
}
.item:first-child {
grid-column-start: -1;
}
.item:nth-child(2) {
grid-row-start: 4;
}The code output:
When you compare this output with the previous one, you will notice that the items have different size. Implicit tracks will now always have a width of 200px and a height of 60px, no matter if the grid item fits or not.
Automatic Placement
Implicit tracks are added if the number of items exceeds the number of cells. The auto-placement algorithm places items by filling each row consecutively by default, adding new rows as necessary. You can also use the grid-auto-flow property to specify the flow of the grid.
Automatic placement of implicit grids in CSS is done using the grid-auto-flow property, which controls the placement of items that are not explicitly placed on the grid.
Before we move on to the example of automatic grid placement, keep in mind that the grid-auto-flow property only affects the placement of items that are not explicitly placed on the grid. If you want to control the placement of specific items, you can use the grid-row and grid-column properties to position them manually.
Let's see the automatic placement via an example:
<section class="grid">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
</section> The CSS:
.item{
background-color: rgb(215, 181, 246);
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
grid-gap: 20px;
grid-auto-flow: column;
}In the example, grid-template-columns: repeat(4, 1fr), the repeat() function is used to repeat a pattern of four-column tracks, each with a width of 1fr. Finally, grid-auto-flow: column; determines the flow of the grid items within the grid container. It specifies that the items should be added to the grid in columns, filling the columns from top to bottom, and then moving to the next column as needed.
This example will create a grid container with four equally-sized columns, and each column will take up an equal amount of horizontal space within the container:
Conclusion
In this topic, you've learned about explicit and implicit grids. You've learned how to handle grids with different properties. Along with implicit and explicit grids, you've learned how to auto-fit and auto-place the grid. Let's move on to the test.