【CSS】css grid 布局 grid常用指令完整版

小经验：place的简写指令都是aligh是第一个值 justify是第二个值（1值 竖向 2值横向），其他的默认row是1值 column是2值；

常用的container的指令：

display：grid；

grid-template-rows / grid-template-columns
可以使用的单位示例：grid-template-rows: 25% 100px auto;

grid-template-areas
通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。
语法示例：
grid-template-areas:
“header header header header”
“main main . sidebar”
“footer footer footer footer”;

grid-template
用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 简写属性。
语法示例：（grid-template-areas不用这个简写。这种语法太复杂，不建议使用）
.container {
grid-template:
[row1-start] “header header header” 25px [row1-end]
[row2-start] “footer footer footer” 25px [row2-end]
/ auto 50px auto;
}
推荐使用：
grid-template:40px 46px 330px / 50px 1180px ;

grid-row-gap / grid-column-gap
网格与网格之间的距离

grid-gap
：长度值
.container{
/* 设置 grid-column-gap 和 grid-row-gap */
grid-column-gap: 10px;
grid-row-gap: 10px;

/* 等价于 */
grid-gap: 10px 10px;

/* 等价于 */
grid-gap: 10px;
}

justify-items / align-items
.container {
justify-items: start | end | center | stretch;
}

place-items
place-items 是设置 align-items 和 justify-items 的简写形式。

：第一个值设置 align-items 属性，第二个值设置 justify-items 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

justify-content / align-content
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

place-content
place-content 是设置 align-content 和 justify-content 的简写形式。

：第一个值设置 align-content 属性，第二个值设置 justify-content 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

grid-auto-rows / grid-auto-columns
指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。
：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}

我们告诉 .item-b 从第 5 条列网格线开始到第 6 条列网格线结束，但我们从来没有定义过 第5 或 第6 列网格线。
因为我们引用的网格线不存在，所以创建宽度为 0 的隐式网格轨道以填补空缺。我们可以使用 grid-auto-columns 和 grid-auto-rows 来指定这些隐式轨道的大小：
.container {
grid-auto-columns: 60px;
}

grid-auto-flow
如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法 会自动放置这些网格项。该属性控制自动布局算法如何工作。
值：
row：告诉自动布局算法依次填充每行，根据需要添加新行 （默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

.container {
grid-auto-flow: row | column | row dense | column dense
}

请注意，dense 只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利。

语法太复杂：但是可以自动分配row 和 column
grid
在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。

常用的item的指令：

grid-area
为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end的简写。

自己补充：1是用来给子项目命名，父容器好用grid-template-areas指令来引用。
2是需要把一个网格固定在一个地方的时候 使用

align-self / justify-self

place-self
place-self 是设置 align-self 和 justify-self 的简写形式。
值：
auto – 布局模式的 “默认” 对齐方式。
：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

本总结是在仔细看了 CSS Grid 布局完全指南(图解 Grid 详细教程)https://www.html.cn/archives/8510#prop-grid-template-areas之后，总结精华所出。侵删