答案：grid-template-rows和columns定义网格行列结构，配合fr、px、minmax等单位实现响应式布局，并通过grid-area或行列定位分配元素区域。
在使用 CSS Grid 布局时，grid-template-rows 和 grid-template-columns 是定义网格结构的核心属性。它们分别控制行高和列宽，合理搭配能实现灵活、响应式的布局。
明确网格结构设计思路
在编写 grid-template-rows 与 columns 前，先规划好页面的分区。比如常见的“头部 + 内容区 + 侧边栏 + 底部”布局，可以按以下方式划分：
用 grid-template-rows 定义垂直方向的区块高度（如 header 占固定高度，main 区自适应） 用 grid-template-columns 设置水平方向的列宽（如 sidebar 固定宽度，content 区弹性伸缩）
示例：
.grid-container {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 250px 1fr;
}
灵活使用单位搭配
合理组合不同单位能让布局更具适应性：
立即学习“前端免费学习笔记（深入）”；
Reclaim.ai
为优先事项创建完美的时间表
90 查看详情 fr：表示可用空间的份数，适合主内容区域 px / rem：用于固定尺寸区域（如导航栏、侧边栏） minmax()：设置最小最大范围，增强响应性 auto：根据内容自动调整大小
例如让中间列至少 300px，但可随窗口变大：
grid-template-columns: 200px minmax(300px, 1fr);
grid-template-rows: auto 1fr auto;
配合 grid-area 精准定位元素
当行列结构定义完成后，可通过 grid-row 和 grid-column 或简写 grid-area 将子元素放入指定区域。
示例：将 aside 放在右侧第一行
aside {
grid-column: 2;
grid-row: 1;
}
或使用命名区域更直观：
grid-template-areas:
“header header”
“sidebar main”
“footer footer”;
header { grid-area: header; }
sidebar { grid-area: sidebar; }基本上就这些。掌握行列定义的逻辑和单位搭配，再结合命名区域或坐标定位，就能高效构建复杂且响应式的页面结构。
以上就是css grid-template-rows与columns结合应用技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042972.html
微信扫一扫 
支付宝扫一扫 
