3.1 The grid-template-columns Property
CSS Grid Layout lets you create complex web page layouts using rows and columns. Two key properties for defining grid structure are grid-template-rows and grid-template-columns. These properties let you specify the number and size of rows and columns in a Grid container, giving developers full control over the layout of elements.
The grid-template-columns property defines the number and sizes of columns in the grid. It takes one or more values, which can be specified in various units like pixels (px), percentages (%), fractional units (fr), and more.
Example 1: Setting Fixed Column Sizes
In this example, the grid will consist of three columns. The first column is 100px wide, the second column is 200px wide, and the third column is 100px wide:
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Three columns with fixed sizes */
}
Example 2: Using Fractional Units (fr)
In this example, the grid will have three columns. The first and third columns will take up equal space, while the second column will be twice as wide as each of them:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Three columns with flexible sizes */
}
Example 3: Using Repeat Function
In this example, the repeat function is used to simplify notation. The grid will consist of three equally wide columns:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three equal columns */
}
Example 4: Setting Min and Max Sizes (minmax)
In this example, each of the three columns will have a minimum width of 100px and a flexible size that can grow up to 1fr depending on available space:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Three columns with a minimum width of 100px and flexible sizes */
}
3.2 The grid-template-rows Property
The grid-template-rows property is similar to grid-template-columns, but it defines the number and sizes of rows in the grid. It also takes one or more values, which can be specified in various units.
Example 1: Setting Fixed Row Sizes
In this example, the grid will consist of three rows. The first row is 50px high, the second row is 100px high, and the third row is 50px high:
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* Three rows with fixed sizes */
}
Example 2: Using Fractional Units (fr)
In this example, the grid will have three rows. The first and third rows will take up equal space, while the second row will be twice as tall as each of them:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* Three rows with flexible sizes */
}
Example 3: Using Repeat Function
In this example, the repeat function is used to simplify notation. The grid will consist of three equally tall rows:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* Three equal rows */
}
Example 4: Setting Min and Max Sizes (minmax)
In this example, each of the three rows will have a minimum height of 50px and a flexible size that can grow up to 1fr depending on available space:
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Three rows with a minimum height of 50px and flexible sizes */
}
3.3 Combining Properties
Combining grid-template-rows and grid-template-columns Properties
These properties can be used together to create complex grids with different row and column sizes.
In this example, the grid will consist of two columns: the first column will take up 1 part of the available space, and the second column will take up 2 parts. The grid will also consist of two rows: the first row is 100px high, and the second row is 200px high.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
Full Implementation Example:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
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>CSS Grid 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 class="grid-item">Item 4</div>
</div>
</body>
</html>
Code Explanation:
.grid-container: defines the container as a grid container with two columns and two rows. The spaces between items are set using thegapproperty.grid-item: defines basic styles for grid items, such as background color, text color, padding, text alignment, and border
GO TO FULL VERSION