5.1 The grid-auto-rows Property
CSS Grid Layout offers great tools for automatically placing items in a grid. The properties grid-auto-rows, grid-auto-columns, and grid-auto-flow help manage the behavior of items that are not explicitly placed in the grid. Let's dive deeper into these properties.
The grid-auto-rows property sets the height of rows that are automatically added when items exceed the explicitly defined rows.
Syntax:
.grid-container {
grid-auto-rows: value;
}
Where:
-
value: the height of automatically added rows. Can be specified in various units (px,%,fr,auto, etc.)
Example 1: Fixed Row Height
In this example, all automatically added rows will have a fixed height of 100px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
grid-auto-rows: 100px; /* Automatically added rows will have a height of 100px */
}
Example 2: Flexible Row Height
In this example, automatically added rows will have a minimum height of 100px, but can grow as needed:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto); /* Minimum row height is 100px, can grow automatically */
}
5.2 The grid-auto-columns Property
The grid-auto-columns property sets the width of columns that are automatically added when items exceed the explicitly defined columns.
Syntax:
.grid-container {
grid-auto-columns: value;
}
Where:
-
value: the width of automatically added columns. Can be specified in various units (px,%,fr,auto, etc.)
Example 1: Fixed Column Width
In this example, all automatically added columns will have a fixed width of 100px:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px); /* Three rows with fixed height */
grid-auto-columns: 100px; /* Automatically added columns will have a width of 100px */
}
Example 2: Flexible Column Width
In this example, automatically added columns will have a minimum width of 100px, but can increase to one part of the free space:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-auto-columns: minmax(100px, 1fr); /* Minimum column width is 100px, can increase to one part of the free space */
}
5.3 The grid-auto-flow Property
The grid-auto-flow property defines how to automatically place items in the grid that are not explicitly set using the grid-row and grid-column properties.
Syntax:
.grid-container {
grid-auto-flow: value;
}
Where:
value: the value that determines the order of item placement. Possible values:
row(default): items are placed by rowscolumn: items are placed by columnsdense: items are placed densely, with no empty cells (used withroworcolumn)
Example 1: Row Placement
In this example, items will be placed by rows, filling rows one after another:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row; /* Items are placed by rows */
}
Example 2: Column Placement
In this example, items will be placed by columns, filling columns one after another:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column; /* Items are placed by columns */
}
Example 3: Dense Filling
In this example, items will be placed by rows with dense filling, minimizing the number of empty cells:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense; /* Items are placed by rows with dense filling */
}
5.4 Example of Full Implementation
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns with equal width */
grid-auto-rows: 100px; /* Automatically added rows will have a height of 100px */
grid-auto-flow: row dense; /* Items are placed by rows with dense filling */
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
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>Example of Automatic Item Placement in CSS Grid</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 class="grid-item">Item 6</div>
</div>
</body>
</html>
Code Explanation:
-
.grid-container: creates a Grid container with three columns of equal width and automatic rows with a height of100px. Items are placed by rows with dense filling -
.grid-item: defines basic styles for grid items, like background color, text color, padding, text alignment, and border
GO TO FULL VERSION