CSS 属性 grid-auto-rows 定义网格行轨道或隐式创建的一组轨道的尺寸。
当网格项放置在没有指定大小的行中时， grid-template-rows，网格系统创建隐式网格通道来容纳它。当项目放置在定义区域之外的行中或自动放置过程创建其他行时，就会发生这种情况。
属性值
<length>: 是非负长度。
<percentage>: 是一个 <percentage> 值，相对于网格容器的块大小为非负值。如果网格容器的块大小不确定，则百分比值设置为自动。
<flex>: 该值是一个非负尺寸，单位为fr，表示轨道的弯曲系数。每个具有一定大小的轨道都会根据其弹性系数占用一部分剩余空间。
max-content: 这是一个关键字，指定占据网格轨道的网格元素的最大内容贡献。
min-content: 这是一个关键字，指定网格轨道内网格元素的最大最小内容贡献。
- minmax(min, max): 此函数定义从最小值到最大值的大小范围。如果最大值小于最小值，则不考虑最大值，函数仅使用最小值。
fit-content( [ <length> | <percentage> ] ): 表示表达式 min(max-content, max(auto, argument))，其计算方式与 auto 类似（即 minmax( auto, max-content))，但如果轨道大小超过自动最小值，则轨道大小将受到参数的限制。
auto: 轨道中的最大值和最小值指示最大和最小内容大小（由 min-width/min-height 指定）分别，当在 minmax() 之外单独使用时，auto 覆盖它们之间的范围 表示法。
语法
grid-auto-columns = <track-size>+
<track-size> = <track-breadth> minmax(<inflexible-breadth> , <track-breadth>) | fit-content(<length-percentage [0,∞]>) 适用范围
网格容器。
CSS grid-auto-rows: <length>
以下示例演示使用长度的 grid-auto-rows 的用法。
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.grid-container {
display: grid;
grid-auto-rows: 50px; /* Change this value to see the effect */
gap: 15px;
padding: 20px;
background-color: #d7dade;
}
.item {
background-color: #054ab0;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="item">Box 1</div>
<div class="item">Box 2</div>
<div class="item">Box 3</div>
<div class="item">Box 4</div>
<div class="item">Box 5</div>
<div class="item">Box 6</div>
</div>
</body>
</html> CSS grid-auto-rows: <percentage>
在下面的例子中，CSS grid-auto-rows: 45%;定义网格中隐式创建的行的高度，确保超出显式定义行的每个附加行占用可用高度的 45%。
<html>
<head>
<style>
.custom-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 45%;
gap: 20px;
padding: 30px;
background-color: seagreen;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
margin: 50px;
}
.custom-item {
background-color: #db3c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="custom-grid-container">
<div class="custom-item">Grid Element A</div>
<div class="custom-item">Grid Element B</div>
<div class="custom-item">Grid Element C</div>
<div class="custom-item">Grid Element D</div>
<div class="custom-item">Grid Element E</div>
<div class="custom-item">Grid Element F</div>
</div>
</body>
</html> CSS grid-auto-rows: <flex>
以下示例演示了使用 flex 即 fr 的 grid-auto-rows 的用法。
<html>
<head>
<style>
.unique-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr 2fr;
gap: 20px;
padding: 20px;
background-color: #5E9CA0;
border-radius: 12px;
box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
margin: 50px;
}
.unique-item {
background-color: #FFD700;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="unique-grid-container">
<div class="unique-item">Special Box X</div>
<div class="unique-item">Special Box Y</div>
<div class="unique-item">Special Box Z</div>
<div class="unique-item">Special Box W</div>
<div class="unique-item">Special Box V</div>
<div class="unique-item">Special Box U</div>
</div>
</body>
</html> CSS grid-auto-rows: max-content
以下示例演示使用 max-content 的 grid-auto-rows 的用法。
<html>
<head>
<style>
.customized-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: max-content;
gap: 25px;
padding: 15px;
background-color: #c90e27;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
margin: 40px;
}
.customized-item {
background-color: #FFA07A;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 8px;
padding: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="customized-grid-container">
<div class="customized-item">Special BLOCK A with Larger- Content</div>
<div class="customized-item">BLOCK B</div>
<div class="customized-item">BLOCK C</div>
<div class="customized-item">Special BLOCK D with Longer Content</div>
<div class="customized-item">BLOCK E</div>
<div class="customized-item">BLOCK F</div>
</div>
</body>
</html> CSS grid-auto-rows: min-content
以下示例演示 grid-auto 的用法-rows 使用 min-content。
<html>
<head>
<style>
.customized-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: min-content;
gap: 25px;
padding: 15px;
background-color: #f0582e;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
margin: 40px;
}
.customized-item {
background-color: #e0b4ba;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 10px;
padding: 10px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="customized-grid-container">
<div class="customized-item">Block A</div>
<div class="customized-item">Block B</div>
<div class="customized-item">Block C</div>
<div class="customized-item">Block D</div>
<div class="customized-item">Block E</div>
<div class="customized-item">Block F</div>
</div>
</body>
</html> CSS grid-auto-rows: fit-content
以下示例演示了使用 fit-content 的 grid-auto-rows 的用法。
<html>
<head>
<style>
.customized-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: fit-content(100px);
gap: 25px;
padding: 15px;
background-color: #6495ED;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
margin: 40px;
}
.customized-item {
background-color: #FFD700;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 12px;
padding: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="customized-grid-container">
<div class="customized-item">Flexible Block A</div>
<div class="customized-item">Flexible Block B</div>
<div class="customized-item">Flexible Block C</div>
<div class="customized-item">Flexible Block D with Longer Content</div>
<div class="customized-item">Flexible Block E with Longer Content</div>
<div class="customized-item">Flexible Block F with Longer Content</div>
</div>
</body>
</html> CSS grid-auto-rows: minmax(min, max)
以下示例演示了使用 minmax(min, max) 的 grid-auto-rows 的用法。
<html>
<head>
<style>
.customized-grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(80px, 1fr);
gap: 25px;
padding: 15px;
background-color: #FF6347;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
margin: 40px;
}
.customized-item {
background-color: #87CEEB;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
border-radius: 12px;
padding: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="customized-grid-container">
<div class="customized-item">Resizable Block A</div>
<div class="customized-item">Resizable Block B</div>
<div class="customized-item">Resizable Block C</div>
<div class="customized-item">Resizable Block D with Longer Content</div>
<div class="customized-item">Resizable Block E with Longer Content</div>
<div class="customized-item">Resizable Block F with Longer Content</div>
</div>
</body>
</html> CSS grid-auto-rows: auto
在以下示例中，CSS grid-auto-rows: auto;表示网格中隐式形成的行的高度将取决于内容的固有大小，因此每行将动态调整大小以适合自定义网格容器内的内容。
<html>
<head>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.custom-grid-container {
display: grid;
grid-auto-rows: auto;
gap: 20px;
padding: 30px;
background-color: #6a6a6a;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
margin: 50px;
}
.custom-item {
background-color: #db3c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 8px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="custom-grid-container">
<div class="custom-item">BOX 1</div>
<div class="custom-item">BOX 2</div>
<div class="custom-item">BOX 3</div>
<div class="custom-item">BOX 4</div>
<div class="custom-item">BOX 5</div>
<div class="custom-item">BOX 6</div>
</div>
</body>
</html>