响应式网页设计-CSS网格

在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）

CSS 网格

 display :grid ;

可以对该容器使用与 CSS 网格（CSS Grid）相关的属性

grid-template-columns 添加多列

.container {
  display: grid;
  grid-template-columns: 50px 50px;
}
在网格容器中添加两列，宽度均为 50px
grid-template-columns 属性值的个数表示网格的列数，每个值表示相应的列宽度

grid-template-rows 添加多行

同上

更改列和行的大小

定义行、列大小：

• 绝对单位（如 px）
• 相对单位（如 em）
• fr：设置列或行占剩余空间的比例，
• auto：设置列宽或行高自动等于它的内容的宽度或高度，
• %：将列或行调整为它的容器宽度或高度的百分比，

grid-template-columns: auto 50px 10% 2fr 1fr;
第一列的宽与它的内容宽度相等；第二列宽 50px；第三列宽是它容器的 10%；最后两列，将剩余的宽度平均分成三份，第四列占两份，第五列占一份

grid-column-gap 创建多列之间的间距

grid-column-gap: 10px;
所有列之间都添加 10px 的空白间距

grid-row-gap 创建多行之间的间距

同上

grid-gap 为网格添加间距
grid-gap 属性是前两个挑战中出现的 grid-row-gap 和 grid-column-gap 的简写属性，它更方便使用。

如果 grid-gap 只有一个值，那么这个值表示行与行之间、列与列之间的间距均为这个值。
如果有两个值，那么第一个值表示行间距，第二个值表示列间距。

grid-column 来控制空间大小

这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。
要设置一个网格项占据几列，你可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。

grid-column: 1 / 3;
从左侧第一条线开始到第三条线结束，占用前两列

grid-row 来控制空间大小

同上

justify-self 水平对齐项目

设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。

• start：使内容在单元格左侧对齐，
• center：使内容在单元格居中对齐，
• end：使内容在单元格右侧对齐，

align-self 垂直对齐项目

同上

justify-items 水平对齐所有项目

同上

align-items 垂直对齐所有项目
让网格中所有的网格项沿竖直方向对齐

同上

单元格组成区域模板
将网格中的一些单元格组合成一个区域（area）

注意：在代码中，每个单词代表一个网格单元格，每对引号代表一行。 除了自定义标签.
可使用句点（.）来表示一个空单元格

grid-template-areas:
  "header header header"
  "advert content content"
  "footer footer footer";
  
将顶部三个单元格合并成一个名为 header 的区域，
将底部三个单元格合并为一个名为 footer 的区域，
并在中间行创建了两个区域：advert 和 content。 

grid-area 属性将项目放置在网格区域中

.item1 {
  grid-area: header;
}
class 为 item1 的网格项被放到了 header 区域里。 
在这个示例中，网格项将占用第一行整行，因为这一整行都被命名为标题区域

repeat 函数减少重复

添加 100 行网格的例子，每行高度均为 50px
grid-template-rows: repeat(100, 50px);

可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用
grid-template-columns: repeat(2, 1fr 50px) 20px;
相当于
grid-template-columns: 1fr 50px 1fr 50px 20px;
1fr 50px 重复了两次，后面跟着 20px。

minmax 函数限制项目大小

可用于设置 grid-template-columns 和 grid-template-rows 的值。 它的作用是在网格容器改变大小时限制网格项的大小

grid-template-columns: 100px minmax(50px, 200px);
添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px

auto-fill 创建弹性布局

在这里插入代码片repeat(auto-fill, minmax(60px, 1fr));