网格布局的重要内容_inline-grid gap 大小-CSDN博客

本文详细介绍了CSS Grid布局，包括容器和项目的概念，如何定义行和列，使用grid-template-columns和grid-template-rows，以及百分比、auto、fr、minmax等单位的应用。还讲解了grid-gap、place-items、justify-content和align-content等属性用于控制间距和对齐，以及如何通过grid-template-areas指定区域和合并单元格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

grid布局（网格布局）
可以将网页分为网格，然后利用这些网格组合出各种的布局
1、容器和项目

行列单元格网格线

容器的几个重要属性：
1、display
值： grid 块级 inline-grid 行内开启网格布局
2、定义行和列
grid-template-columns:指定列的宽度
grid-template-rows：行的高度

值得设置方式：
1、grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
2、百分数
3、auto 浏览器自己决定
grid-template-rows: 10% auto 60%px;
grid-template-columns: 200px 200px 200px;
4、repeat（）接收两个参数第一次是重复的次数第二个是重复的值
grid-template-rows: (3.33%);
grid-template-columns: (2,100px 80px 200px);
5、fr关键字
width:500px
grid-template-columns: 1fr 20px 4fr;
6、minmax() 设置范围
grid-template-columns: 1fr， 4fr minmax(100px，1fr);
接收两个参数：分别是最小值和最大值

grid-colum-gap 列间距
grid-row-gap 行间距

grid-gap:20px 10px 简写行列间距
设置单元格内容的对齐方式：
justify-items 设置单元格内容水平方向的对齐方式
align-items 垂直方向的对齐方式
简写： place-items 垂直水平
值：start 起始边缘
end 结束边缘
stretch 拉伸

整个内容区域在容器中的对齐方式
justify-content 设置整个内容区域在容器中水平方向的对齐方式
align-content 设置整个内容区域在容器中垂直方向的对齐方式
简写：place-content:垂直水平
值：start
end
center
space-around
space-between
space-evenly
stretch

给网格布局指定区域：
grid-template-areads

.con{
display:grid
grid-template-rows:100px 100px 100px
grid-template-columns:100px 100px 100px
grid-template-areads:'a b c'
'd e f'
'g h i'

}

多个单元格合并几个区域
.con{
grid-template-areads：'a b c'
'd e f'
'g h i'
}

若某些区域不需要利用可以用（“.”）表示
.con{
grid-template-areads'a b c'
'd e f'
'g h i'
}

指定项目位置：
通过指定项目的四个边框，分别定位在哪条边框线上
grid-columns-start 左边框所在的垂直网格线上(开始位)
grid-columns