CSS -- Grid -- 网格布局
切慕溪水 2019-07-01
重要术语
网格容器（Grid Container）：
应用 display:grid 的元素。
是所有网格项（grid item）的直接父级元素。
网各项（Grid Item）：
网格容器（Grid Container）的直接子元素。
网格线（Grid Line）：
构成网格结构的分界线（从网格容器的一边到另一边）。
网格线既可以是垂直的（列网格线：column grid lines）。
网格线也可以是水平的（行网格线：row grid lines）。
网格轨道（Grid Track）：
两条相邻网格线之间的空间。
你可以把它们想象成网格的行或列。
网格单元格（Grid Cell）：
两个相邻的行和两个相邻的列网格线之间的空间。
这是 Grid（网格）系统的一个 "单元"。
网格区域（Grid Area）：
4条网格线包围的空间。
一个网格区域可以由任意数量的网格单元组成。
网格容器（Grid Container）属性：
display：将元素定义为网格容器。
语法：
display: grid | inline-grid;
属性值：
-- grid：生成一个块级网格。
-- inline-grid：生成一个内联网格。
grid-template-columns：定义网格的列。
语法：
grid-template-columns: track-size ... track-size | [line-name] track-size ... [line-name] track-size;
使用空格分隔的值列表，定义网格的列，这些值表示网格轨道的大小，他们之间的空格表示网格线。
属性值：
-- <track-size>：可以是长度值，百分比，或者等分网格容器中的可用空间（使用 fr 单位）。
-- <line-name>：网格线名称，你可以选择的任意名称。
注意：使用自定义网格线名称时，注意中括号语法。一条网格线名称可以由多个，用空格分隔。
grid-template-rows：定义网格的行。
语法：
grid-template-rows: track-size ... track-size | [line-name] track-size ... [line-name] track-size;
使用空格分隔的值列表，定义网格的行，这些值表示网格轨道的大小，他们之间的空格表示网格线。
属性值：
-- <track-size>：可以是长度值，百分比，或者等分网格容器中的可用空间（使用 fr 单位）。
-- <line-name>：网格线名称，你可以选择的任意名称。
注意：使用自定义网格线名称时，注意中括号语法。一条网格线名称可以由多个，用空格分隔。
grid-template-areas：通过引用 grid-area 属性指定的名称来定义网格模板。
语法：
grid-template-areas:
"grid-area-name | . | none ... grid-area-name | . | none" ... "grid-area-name | . | none ... grid-area-name | . | none"
属性值：
-- grid-area-name：由网各项的 grid-area 指定的网格区域的名称。
-- .（点号）：代表一个空的网格单元。
-- none：不定义网格区域。
示例：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"itema itema itemb itemb"
"itemc itemc itemc itemc"
"itemd itemd itemd itemd";}
.item { height: 100px; line-height: 100px; color: #FFFFFF; font-weight: bold; text-align: center; }
.item-a { grid-area: itema; background-color: #FF9900; }
.item-b { grid-area: itemb; background-color: #FF0099; }
.item-c { grid-area: itemc; background-color: #9900FF; }
.item-d { grid-area: itemd; background-color: #0099FF; }
<div class="container">
<div class="item item-a">item-a</div> <div class="item item-b">item-b</div> <div class="item item-c">item-c</div> <div class="item item-d">item-d</div>
</div>
示例效果：
注释：
相同名称要互相挨着，中间不能有别的名称和.(点号)或none。
例如：itema itemb itema itema 是不合法的，因为 itema中间有itemb。
grid-template：在单个声明中定义 grid-template-rows、grid-template-columns、grid-template-areas 的简写。
提示：不建议用简写。
grid-column-gap：定义列网格线的大小（列之间的距离）。
grid-row-gap：定义行网格线的大小（行之间的距离）。
grid-gap：定义列网格线和行网格线的大小（列之间的距离和行之间的距离）。
语法：
grid-column-gap: size;
grid-row-gap:size;
grid-gap: grid-column-gap-size grid-row-gap-size;
属性值：
-- size：一个长度值。
-- grid-column-gap-size：列网格线的大小，一个长度值。
-- grid-row-gap-size：行网格线的大小，一个长度值。
justigy-items：行对齐方式。
沿着行轴对齐网格内的内容，该值适用于容器内的所有网各项。
语法：
justigy-items: start | end | center | stretch;
属性值：
-- start：内容与网格区域的左端对齐。
-- end：内容与网格区域的右端对齐。
-- center：内容位于网格区域的中间位置。
-- stretch：内容宽度占据整个网格区域空间（这是默认值）。
示例：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px; background: #64D8DE; margin-bottom: 20px; grid-gap: 10px 10px; }
.container-start { justify-items: start; }
.container-end { justify-items: end; }
.container-center { justify-items: center; }
.container-stretch { justify-items: stretch; }
.item { color: #FFFFFF; }
.container-start .item { background: #FF9900; }
.container-end .item { background: #FF0099; }
.container-center .item { background: #9900FF; }
.container-stretch .item { background: #0099FF; }
<div class="container container-start">
<div class="item">justify-items: start</div> <div class="item">justify-items: start</div> <div class="item">justify-items: start</div> <div class="item">justify-items: start</div>
</div>
<div class="container container-end">
<div class="item">justify-items: end</div> <div class="item">justify-items: end</div> <div class="item">justify-items: end</div> <div class="item">justify-items: end</div>
</div>
<div class="container container-center">
<div class="item">justify-items: center</div> <div class="item">justify-items: center</div> <div class="item">justify-items: center</div> <div class="item">justify-items: center</div>
</div>
<div class="container container-stretch">
<div class="item">justify-items: stretch</div> <div class="item">justify-items: stretch</div> <div class="item">justify-items: stretch</div> <div class="item">justify-items: stretch</div>
</div>
示例效果：
align-items：列对齐方式。
沿着列轴对齐网格内的内容，该值适用于容器内的所有网各项。
语法：
align-items: start | end | center | stretch;
属性值：
-- start：内容与网格区域的顶端对齐。
-- end：内容与网格区域的底部对齐。
-- center：内容位于网格区域的垂直中心位置。
-- stretch：内容高度占据整个网格区域空间（这是默认值）。
示例：
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px; background: #64D8DE; margin-bottom: 20px; grid-gap: 10px 10px; }
.container-start { align-items: start; }
.container-end { align-items: end; }
.container-center { align-items: center; }
.container-stretch { align-items: stretch; }
.item { color: #FFFFFF; }
.container-start .item { background: #FF9900; }
.container-end .item { background: #FF0099; }
.container-center .item { background: #9900FF; }
.container-stretch .item { background: #0099FF; }
<div class="container container-start">
<div class="item">align-items: start</div> <div class="item">align-items: start</div> <div class="item">align-items: start</div> <div class="item">align-items: start</div>
</div>
<div class="container container-end">
<div class="item">align-items: end</div> <div class="item">align-items: end</div> <div class="item">align-items: end</div> <div class="item">align-items: end</div>
</div>
<div class="container container-center">
<div class="item">align-items: center</div> <div class="item">align-items: center</div> <div class="item">align-items: center</div> <div class="item">align-items: center</div>
</div>
<div class="container container-stretch">
<div class="item">align-items: stretch</div> <div class="item">align-items: stretch</div> <div class="item">align-items: stretch</div> <div class="item">align-items: stretch</div>
</div>
示例效果：
place-items：设置 align-items 和 justify-items 的简写形式。
语法：
place-items: align-items justify-items;
属性值：
-- align-items：设置align-items属性。
-- justify-items：设置justify-items属性。
justify-content：行轴网格项的对齐方式。
语法：
justify-content: start | end | center | stretch | space-around | space-beteween | space-evenly;
属性值：
-- start：将网格项对齐到网格容器的左侧。
-- end：将网格项对齐到网格容器的右侧。
-- center：将网格项对齐到网格容器的中间。
-- stretch：调整网格项的宽度，允许网格项填充满整个网格容器的宽度。
-- space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间。
-- space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间。
-- space-evenly：在每个网格项之间放置一个均匀的空间，左右两端放置一个均匀的空间。
示例代码：
.container { display: grid; height: 80px; grid-template-columns: auto auto auto auto; grid-template-rows: auto; background: #64D8DE; margin-bottom: 20px; grid-gap: 10px 10px; }
.container-start { justify-content: start; }
.container-end { justify-content: end; }
.container-center { justify-content: center; }
.container-stretch { justify-content: stretch; }
.container-around { justify-content: space-around; }
.container-between { justify-content: space-between; }
.container-evenly { justify-content: space-evenly; }
.item { color: #FFFFFF; }
.container-start .item { background: #FF9900; }
.container-end .item { background: #FF0099; }
.container-center .item { background: #9900FF; }
.container-stretch .item { background: #0099FF; }
.container-around .item { background: #FF9900; }
.container-between .item { background: #FF0099; }
.container-evenly .item { background: #9900FF; }
<div class="container container-start">
<div class="item">justify-content: start</div>
<div class="item">justify-content: start</div>
<div class="item">justify-content: start</div>
<div class="item">justify-content: start</div>
</div>
<div class="container container-end">
<div class="item">justify-content: end</div>
<div class="item">justify-content: end</div>
<div class="item">justify-content: end</div>
<div class="item">justify-content: end</div>
</div>
<div class="container container-center">
<div class="item">justify-content: center</div>
<div class="item">justify-content: center</div>
<div class="item">justify-content: center</div>
<div class="item">justify-content: center</div>
</div>
<div class="container container-stretch">
<div class="item">justify-content: stretch</div>
<div class="item">justify-content: stretch</div>
<div class="item">justify-content: stretch</div>
<div class="item">justify-content: stretch</div>
</div>
<div class="container container-around">
<div class="item">justify-content: around</div>
<div class="item">justify-content: around</div>
<div class="item">justify-content: around</div>
<div class="item">justify-content: around</div>
</div>
<div class="container container-between">
<div class="item">justify-content: between</div>
<div class="item">justify-content: between</div>
<div class="item">justify-content: between</div>
<div class="item">justify-content: between</div>
</div>
<div class="container container-evenly">
<div class="item">justify-content: evenly</div>
<div class="item">justify-content: evenly</div>
<div class="item">justify-content: evenly</div>
<div class="item">justify-content: evenly</div>
</div>
示例效果：
align-content：列轴网各项的对齐方式。
语法：
align-content: start | end | center | stretch | space-around | space-beteween | space-evenly;
属性值：
-- start：将网格项对齐到网格容器的顶部。
-- end：将网格项对齐到网格容器的底部。
-- center：将网格项对齐到网格容器的垂直中间。
-- stretch：调整网格项的宽度，允许网格项填充满整个网格容器的高度。
-- space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间。
-- space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间。
-- space-evenly：在每个网格项之间放置一个均匀的空间，上下两端放置一个均匀的空间。
示例代码：
.container { display: grid; height: 80px; grid-template-columns: auto auto auto auto; grid-template-rows: auto; background: #64D8DE; margin-bottom: 20px; grid-gap: 10px 10px; }
.container-start { align-content: start; }
.container-end { align-content: end; }
.container-center { align-content: center; }
.container-stretch { align-content: stretch; }
.container-around { align-content: space-around; }
.container-between { align-content: space-between; }
.container-evenly { align-content: space-evenly; }
.item { color: #FFFFFF; }
.container-start .item { background: #FF9900; }
.container-end .item { background: #FF0099; }
.container-center .item { background: #9900FF; }
.container-stretch .item { background: #0099FF; }
.container-around .item { background: #FF9900; }
.container-between .item { background: #FF0099; }
.container-evenly .item { background: #9900FF; }
<div class="container container-start">
<div class="item">align-content: start</div>
<div class="item">align-content: start</div>
<div class="item">align-content: start</div>
<div class="item">align-content: start</div>
</div>
<div class="container container-end">
<div class="item">align-content: end</div>
<div class="item">align-content: end</div>
<div class="item">align-content: end</div>
<div class="item">align-content: end</div>
</div>
<div class="container container-center">
<div class="item">align-content: center</div>
<div class="item">align-content: center</div>
<div class="item">align-content: center</div>
<div class="item">align-content: center</div>
</div>
<div class="container container-stretch">
<div class="item">align-content: stretch</div>
<div class="item">align-content: stretch</div>
<div class="item">align-content: stretch</div>
<div class="item">align-content: stretch</div>
</div>
<div class="container container-around">
<div class="item">align-content: around</div>
<div class="item">align-content: around</div>
<div class="item">align-content: around</div>
<div class="item">align-content: around</div>
</div>
<div class="container container-between">
<div class="item">align-content: between</div>
<div class="item">align-content: between</div>
<div class="item">align-content: between</div>
<div class="item">align-content: between</div>
</div>
<div class="container container-evenly">
<div class="item">align-content: evenly</div>
<div class="item">align-content: evenly</div>
<div class="item">align-content: evenly</div>
<div class="item">align-content: evenly</div>
</div>
示例效果：
place-content：align-content 和 justify-content 的缩写形式。
语法：
place-content: align-content justify-content;
属性值：
-- align-content：设置align-content属性。
-- justify-content：设置justify-content属性。
grid-auto-rows：设置隐式行的大小（不常用）。
grid-auto-columns：设置隐式列的大小（不常用。
grid-auto-flow：布局算法（不常用。
grid：所有属性的简写形式，不建议使用。
网各项（Grid Items）属性：
grid-column-start：设置网格项开始的列网格线。
grid-column-end：设置网格项结束的列网格线。
grid-row-start：设置网格项开始的行网格线。
grid-row-end：设置网格项结束的行网格线。
grid-column：grid-column-start 和 grid-column-end 的简写形式。
grid-row：grid-row-start 和 grid-row-end 的简写形式。
grid-area：为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。
justify-self：沿着行轴线对齐自身内容。
align-self：沿着列轴线对齐自身内容。
place-self：align-self 和 justify-self 的简写形式。
