2.1 The display: grid Property
CSS Grid Layout is a powerful layout system that lets you create complex webpage layouts using rows and columns. The main step when working with CSS Grid is creating a Grid container. Below we'll see how to use the display: grid property to create a Grid container and manage its basic aspects.
Main Concepts of Grid Container Creation
The display: grid Property
The display: grid property defines an element as a Grid container. This is the basic step that enables you to use all the CSS Grid features for layout management.
Example:
.grid-container {
display: grid;
}
Main Elements of a Grid Container
After defining a Grid container using the display: grid property, all child elements of this container automatically become grid items. This allows you to manage their placement and alignment within the container.
Example:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Code Explanation:
.grid-container: Defines the element as a Grid container using thedisplay: gridproperty. Also adds a border to visually highlight the container.grid-item: Sets basic styles for elements inside the Grid container, such as background color, text color, padding, border, and text alignment
2.2 Nested Grid Containers
One of the advantages of CSS Grid is the ability to create nested Grid containers. This allows for complex layouts where one grid item can become a Grid container for its child elements.
Example:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested Grid Containers</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">
<div class="nested-grid-container">
<div class="nested-grid-item">Nested Item 1</div>
<div class="nested-grid-item">Nested Item 2</div>
</div>
</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Code Explanation:
-
.nested-grid-container: Defines a nested Grid container usingdisplay: grid, and also adds gaps between items (gap: 5px) and padding (padding: 10px) -
.nested-grid-item: Sets basic styles for elements inside the nested Grid container, such as background color, padding, and border
2.3 Managing Grid Container Behavior
The display: grid property also allows us to use additional properties to control Grid container behavior. For instance, the grid-auto-flow property manages the automatic placement of items.
Example:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Container with Auto-flow</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
</div>
</body>
</html>
2.4 Using Flexbox Inside a Grid Container
In some cases, using Flexbox within grid items can be helpful for creating more complex layouts. This lets you combine the benefits of both technologies.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox inside Grid Container</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Code Explanation:
.flex-container: Defines a grid item as a flex container using thedisplay: flexproperty.flex-item: Sets basic styles for elements within the flex container, such as background color, padding, and flexibility (flex: 1)
GO TO FULL VERSION