目录
2.1 grid-template-rows和grid-template-columns
2.5 justify-items（水平方向）和 align-items（垂直方向）
2.6 justify-content (水平方向) / align-content (垂直方向)
2.7 grid-auto-columns 和 grid-auto-rows
3.1 grid-column-start / grid-column-end 和 grid-row-start / grid-row-end
3.4 justify-self / align-self / place-self
一、什么是Grid布局
grid布局将容器划分为 行 和 列，产生单元格，可以将其看作为二维布局，也称为网格布局
二、容器属性值
2.1 grid-template-rows和grid-template-columns
需要多少行或列，根据自己需求填写，属性值个数，不填写则自动分配
首先准备容器和项目，并用不同的颜色区分项目
<body>
<div class="main">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
</div>
</body>.main{
display: grid;
width: 600px;
height: 600px;
border: 10px solid skyblue;
}
.item{
font-size: 50px;
background-color: red;
color: #fff;
}
.item-1{
background-color: orangered;
}
.item-2{
background-color: orange;
}
.item-3{
background-color: palegreen;
}
.item-4{
background-color: palevioletred;
}
.item-5{
background-color: papayawhip;
}
.item-6{
background-color:peru;
}
.item-7{
background-color:pink;
}
.item-8{
background-color:royalblue;
}
.item-9{
background-color: saddlebrown;
}
.item-10{
background-color: slateblue;
}页面效果展示 - 容器和项目
2.1.1 grid-template-columns
（1）为容器.main的grid-template-columns赋值，例如：规定项目为3列且每个项目的宽度为100px
/* grid-template-columns: 100px 100px 100px; */
/* repeat()函数，简化重复的值
grid-template-columns: repeat(<重复次数>,<数值>) */
grid-template-columns: repeat(3,100px);页面效果展示
（2）grid-template-columns: repeat(auto-fill,100px)，其中auto-fill，有时在单元格大小是固定时，容器未规定宽高时会自动填充
grid-template-columns: repeat(auto-fill,100px);页面效果展示 - 设置宽和高600px
页面效果展示 - 未设置宽高，随浏览器伸缩自动填充
（3）fr，表示比例关系，网格布局提供了fr关键字
grid-template-columns: repeat(3,1fr);例如：设置容器宽和高都为600px，grid-template-columns: repeat(3,1fr)，分为3分，每份一等分，即每份容器宽度为200px
页面效果展示 - fr
grid-template-columns: 1fr 2fr 3fr;页面效果展示 - fr，占据份额不同，容器宽和高都为600px，第3份占据总份额的一半，即宽度为300px
（4）minmax() 函数，产生一个长度范围，接受两个参数，分为最小值和最大值
grid-template-columns: 1fr minmax(300px,1fr);表示第二列项目宽度最小值为300px，最大值为1fr
页面效果展示
页面效果展示 - 缩小浏览器使第二列项目宽度达到300px
2.1.2 grid-template-rows
为容器.main的grid-template-rows赋值
/* grid-template-rows: 100px 100px 100px 100px; */
grid-template-rows: repeat(4,100px);页面效果展示
2.2 row-grap和column-grap
item相互之间的距离
2.2.1 row-grap
row-gap: 20px;页面效果展示
2.2.2 column-grap
column-gap: 20px;页面效果展示
若行和列间距相同则可以缩写
gap: 20px;2.3 grid-template-area
一个区域由单个单元格或多个单元格组成，具体使用，由个人决定
区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 区域名-start，终止网格线会自动命名为 区域名-end
grid-template-areas: 'a b c' 'd e f' 'g h i';区域不需要利用则用点代替
grid-template-areas: 'a . c' 'd . f' 'g . i';2.4 grid-auto-flow
划分网格后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是先行后列。
grid-auto-flow: row;页面效果展示 - grid-auto-flow属性赋值：row
grid-auto-flow: row dense;添加dense能够更好得利用空间
页面效果展示 - 未添加dense
页面效果展示 - 添加dense
2.5 justify-items（水平方向）和 align-items（垂直方向）
设置单元格内水平和垂直的对齐方式
2.5.1 justify-items
justify-items: strat / end / center / stretch
justify-items: center;页面效果展示 - justify-items: center
2.5.2 align-items
align-items: center;页面效果展示 - align-items: center
/* 简写，place-items: <justify-items值> <align-items值>; */
place-items: center center;2.6 justify-content (水平方向) / align-content (垂直方向)
设置整个内容区域的水平和垂直的对齐方式
justify-content: start / end | center / stretch / space-around / space-between / space-evenly
align-content: sstart / end | center / stretch / space-around / space-between / space-evenly
justify-content: center;页面效果展示
align-content: center;页面效果展示
justify-content: space-around;
align-content: space-around;页面效果展示
2.7 grid-auto-columns 和 grid-auto-rows
用来设置多出来的项目宽和高
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
grid-auto-rows: 50px;页面效果展示
三、项目属性
3.1 grid-column-start / grid-column-end 和 grid-row-start / grid-row-end
用来指定item的具体位置, 根据在哪根网格线
例如：项目1从网格线1开始到网格线3结束
.item-1{
background-color: orangered;
grid-column-start: 1;
grid-column-end: 3;
}页面效果展示.
span跨越几根网格线
/* grid-column-start: 1; */
/* grid-column-end: 3; */
grid-column-start: span 2;
/* 效果相同 */3.2 grid-column / grid-row
grid-column: 开始的网格线 / 结束的网格线
/* grid-column-start: 1; */
/* grid-column-end: 3; */
grid-column: 1 / 3;
/* 效果相同 */3.3 grid-area
指定项目放在哪一个区域
容器.main设置区域
grid-template-areas: 'a a a' 'b b b' 'c c c';项目.item item-1设置区域
grid-area: b;页面效果展示
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并
简写形式，直接指定项目的位置
grid-area: <row-start> / <column-start> / <row-end> / <column-end>
grid-area: 1 / 1 / 3 / 3;
3.4 justify-self / align-self / place-self
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，
但只作用于单个项目(水平方向)
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，
也是只作用于单个项目(垂直方向)
place-self属性是align-self属性和justify-self属性的合并简写形式
justify-self: start / end / center / stretch
align-self: start / end / center / stretch
place-self: <justify-self属性值> <align-self属性值>
3.4.1 设置justify-self
justify-self: center;页面效果展示 - justify-self: center
3.4.2 设置align-self
align-self: center;页面效果展示 - 添加上align-self: center
3.4.2 设置place-self
与设置justify-self: center且align-self: center 效果相同
place-self: center center;四、基本概念图分享
基本概念图片来源与B站 耕耕老师（id：耕耕技术宅）作图，感觉做得很棒，可以作为基本概念参考图，简单明了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
