- CSS 教程
- CSS - 教程
- CSS - 简介
- CSS - 语法
- CSS - 选择器
- CSS - 包含
- CSS - 度量单位
- CSS - 颜色
- CSS - 背景
- CSS - 字体
- CSS - 文本
- CSS - 图像
- CSS - 链接
- CSS - 表格
- CSS - 边框
- CSS - border-block 属性
- CSS - 边框内联
- CSS - 边距
- CSS - 列表
- CSS - Padding 属性
- CSS - 光标
- CSS - 轮廓
- CSS - 维度
- CSS - 滚动条
- CSS - 内联块
- CSS - 下拉列表
- CSS - visibility 属性
- CSS - Overflow 属性
- CSS - 清除修复
- CSS - float(浮点)
- CSS - 箭头
- CSS - resize 属性
- CSS - quotes 属性
- CSS - order 属性
- CSS - Position 属性
- CSS - hypens 属性
- CSS - :hover(悬停)
- CSS - display(显示)
- CSS - focus 属性
- CSS - zoom(缩放)
- CSS - translate 属性
- CSS - Height 属性
- CSS - hyphenate-character 属性
- CSS - Width 属性
- CSS - opacity 属性
- CSS - z-index 属性
- CSS - bottom 属性
- CSS - 导航栏
- CSS - 覆盖
- CSS - 表单
- CSS - 对齐
- CSS - 图标
- CSS - 图片库
- CSS - 注释
- CSS - 加载器
- CSS - Atrribute 选择器属性
- CSS - 运算器
- CSS - root
- CSS - 盒子模型
- CSS - 计数器
- CSS - Clip (Obsolete) 属性
- CSS - writing-mode 属性
- CSS - Unicode-bidi 属性
- CSS - min-content 属性
- CSS - 全部
- CSS - inset 属性
- CSS - isolation 属性
- CSS - overscroll-behavior 属性
- CSS - justify-items 属性
- CSS - justify-self 属性
- CSS - tab-size 属性
- CSS - pointer-event 属性
- CSS - place-content 属性
- CSS - place-items 属性
- CSS - place-self 属性
- CSS - max-block-size 属性
- CSS - min-block-size 属性
- CSS - mix-blend-mode 属性
- CSS - max-inline-size 属性
- CSS - min-inline-size 属性
- CSS - offset 属性
- CSS - accent-color 属性
- CSS - user-select 属性
- CSS 高级
- CSS - grid 属性
- CSS - Grid 布局
- CSS - flexbox
- CSS - vertical-align 属性
- css - positioning
- css - layers
- css - pseudo_classes
- CSS - 伪元素
- CSS - @ 规则
- CSS 滤镜 - text-effect 属性
- CSS 分页媒体
- CSS 打印
- CSS - 布局
- CSS - 验证
- CSS - 图像精灵
- CSS - !important
- CSS - 数据类型
- CSS3 教程
- CSS - 圆角
- CSS - 边框图像
- CSS - 多种背景
- CSS - 渐变
- CSS - box-shadow 属性
- CSS - box-decoration-break 属性
- CSS - caret-color 属性
- CSS - text-shadow 属性
- CSS - 2D 转换
- CSS - 3D 变换
- CSS - transition 属性
- CSS - 动画
- CSS - 多列布局
- CSS - 盒子大小调整
- CSS - 工具提示
- CSS - buttons
- CSS - 分页
- CSS - 变量
- CSS - 媒体查询
- CSS - 值函数
- CSS - 数学函数
- CSS - Mask 属性
- CSS - shape-outside 属性
- CSS - 样式图像
- CSS - 特异性
- CSS - 自定义属性
- CSS 响应式
- CSS - 响应式网页设计 (RWD)
- CSS - 响应式设计视口
- CSS - 响应式网格视图
- CSS - 响应式媒体查询
- CSS - 响应式图像
- CSS - 响应式视频
- CSS - 响应式框架
- CSS 引用
- CSS - 所有属性列表
- CSS - 颜色引用
- CSS - 浏览器支持参考
- CSS - 网页字体
- CSS 工具
- CSS - PX 到 EM 的转换
CSS - grid-auto-rows 属性
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 (i.e. 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 来使用 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。
<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 - 自动值
在以下示例中,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>