Can the Grid layout in CSS freely control the height?
Can Grid layout in CSS freely control height?
In CSS, Grid Layout is a powerful layout method that allows for more flexible control of page layout. However, when using Grid Layout, can we freely control the height of elements? This article will detail how to control the height of elements in Grid Layout.
1. Setting Height Using the fr Unit
In Grid Layout, we can use the fr unit to set the height of elements. The fr unit represents a proportion of the remaining space. For example, if an element’s height is set to 1 fr, it will occupy 1/2 of the remaining space. We can control the height of different elements by setting their height proportions.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr;
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the example above, we set up a Grid container with three child elements, whose height ratios are 1:2:1. By setting grid-template-rows: 1fr 2fr 1fr;, we can control the height of these three child elements.
2. Use the minmax() Function to Set a Height Range
In addition to using the fr unit, we can also use the minmax() function to set an element’s height range. The minmax() function accepts two parameters: the first represents the minimum height of the element, and the second represents the maximum height. By using the minmax() function, we can constrain the height of an element to a certain range.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr) minmax(100px, 1fr);
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the example above, we use the minmax() function to set the height ranges of three child elements: 100px to 1fr, 200px to 2fr, and 100px to 1fr. This ensures that the heights of these three child elements are within the specified ranges.
3. Using the auto Keyword to Set Automatic Heights
In Grid Layout, we can also use the auto keyword to set the height of an element. When we set the height of an element to auto, the element’s height will automatically adjust based on its content, ensuring that the element’s height adapts to the height of the content.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: auto auto auto;
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="grid-item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="grid-item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>
In the example above, we set the height of all three child elements to auto. This will automatically adjust their height based on the height of their content. This ensures that the element’s height adapts to the height of its content.
4. Setting Height Using Fixed Heights
In addition to using relative height units and auto height, we can also use fixed heights to set the height of an element. By setting a fixed height, we can ensure that the element’s height always remains constant.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 100px 200px 100px;
height: 400px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the example above, we set the heights of the three child elements to 100px, 200px, and 100px, respectively, so that their heights remain fixed. By setting fixed heights, we ensure that the heights of the elements remain consistent.
5. Setting Heights Using Percentages
In Grid Layout, we can also use percentages to set element heights. By setting percentages, we can adjust the height of child elements based on the height of their parent element, achieving a responsive layout.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 20% 60% 20%;
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the above example, we set the heights of the three child elements to 20%, 60%, and 20% of the parent element’s height, respectively. This way, their heights will adjust based on the parent element’s height. By setting percentages, we can achieve a responsive layout.
6. Using min-content and max-content to Set Height
In Grid Layout, we can also use min-content and max-content to set the height of an element. min-content specifies the minimum height of an element, i.e., the minimum height of its content; max-content specifies the maximum height of an element, i.e., the maximum height of its content.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: min-content max-content min-content;
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<div class="grid-item">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="grid-item">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
</div>
In the example above, we set the heights of the three child elements to min-content, max-content, and min-content, respectively. This way, their heights adjust based on the minimum and maximum heights of their content. By using min-content and max-content, we can set the height of the element based on the actual height of its content.
7. Using grid-auto-rows to Set Default Row Height
In Grid Layout, we can use grid-auto-rows to set the default row height. When we add a new row to the Grid container, if we don’t specify a height for the new row, the new row will use the default row height set in grid-auto-rows.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: 100px;
height: 300px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the example above, we set up a Grid container with two columns and set grid-auto-rows: 100px;. This causes newly added rows to use a default row height of 100px. This ensures that new rows always have a consistent height.
8. Use grid-row-start and grid-row-end to set the start and end positions of rows.
In a Grid layout, we can use grid-row-start and grid-row-end to set the start and end positions of a row. By setting these two properties, we can control the position of an element in the Grid row, and thus indirectly control its height.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 100px 200px 100px;
height: 400px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.grid-item:nth-child(2) {
grid-row-start: 2;
grid-row-end: 4;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the above example, we set the heights of the three child elements to 100px, 200px, and 100px, respectively. Using grid-row-start and grid-row-end, we set the second child’s row position to 2 through 4. This way, the second child will occupy the heights of both the 200px and 100px rows.
9. Using grid-row to Set the Row Start and End Positions
In addition to using grid-row-start and grid-row-end, we can also use grid-row to set the row start and end positions. By using grid-row, we can more concisely set the row positions of elements in a Grid layout.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 100px 200px 100px;
height: 400px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
.grid-item:nth-child(2) {
grid-row: 2 / 4;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the example above, we use grid-row: 2 / 4; to set the row position of the second child. This way, the second child’s height will occupy the height of two rows, 200px and 100px. By using grid-row, we can more concisely set the row position of elements.
10. Setting Row Gap with grid-row-gap
In Grid Layout, we can use grid-row-gap to set the spacing between rows. By setting row gap, we can control the distance between rows, which indirectly affects the height of elements.
The sample code is as follows:
.grid-container {
display: grid;
grid-template-rows: 100px 200px 100px;
grid-row-gap: 20px;
height: 440px;
}
.grid-item {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
In the above example, we set the heights of the three child elements to 100px, 200px, and 100px, respectively. We also set the row spacing to 20px using grid-row-gap: 20px;. This controls the distance between rows, indirectly affecting the height of the elements.
Conclusion
Through this article, we’ve learned how to freely control the height of elements using Grid Layout in CSS. We can use the fr unit, the minmax() function, the auto keyword, fixed heights, percentages, min-content and max-content, grid-auto-rows, grid-row-start and grid-row-end, grid-row, and grid-row-gap to control element heights and achieve flexible layouts.