一行css代码搞定响应式布局

学习目标：
如何使用 CSS Grid 来创建一个超酷的图像网格？替代媒体查询和响应式布局

display:grid;

grid-template-columns: 100px 100px 100px // 列宽

grid-template-rows: 50px 50px; // 行宽

display: grid;
grid-template-columns: 100px 100px 100px;  // 列宽
grid-template-rows: 50px 50px; // 行宽

列宽100px

基础响应单位: fraction

display: grid;
grid-template-columns: 1fr 1fr 1fr;  // 列宽
grid-template-rows: 50px 50px; // 行宽

结果是栅格布局将会把整个宽度分成三个 fraction，每列占据一个 fraction 单位，效果如图：

如果我们将grid-template-columns的值更改为1fr 2fr 1fr

display: grid;
grid-template-columns: 1fr 2fr 1fr;  // 列宽
grid-template-rows: 50px 50px; // 行宽

第二列的宽度将会是其它两列的两倍。总宽现在是四个 fraction 单位，第二列占据两个 fraction 单位，其它列各占一个 fraction。效果如图：

总的来说，fraction 单位值将使你可以很容易的更改列的宽度

高级响应： 根据容器的宽度改变列的数量

repeat() :这是一个强大的指定列和行的方法 ;
auto-fit
minmax()

repeat(count, width)

第一个参数指定行与列的数量，第二个参数指定它们的宽度

   display: grid;
  grid-template-columns: repeat(3, 100px); /* 相当于100px 100px 100px */
  grid-template-rows: repeat(2, 50px);

使用repeat函数指定行和列

auto-fit

让我们跳过固定数量的列，将3替换为自适应数量

 display: grid;
 grid-template-columns: repeat(auto-fit, 100px);
 /* 让我们跳过固定数量的列，将3替换为自适应数量auto-fit */
  grid-template-rows: repeat(2, 50px);

auto-fit实现列数由列宽和容器宽自适应

栅格将会根据容器的宽度调整其数量。它会尝试在容器中容纳尽可能多的 100px 宽的列。但如果我们将所有列硬写为 100px，我们将永远没法获得所需的弹性，因为它们很难填充整个宽度。正如你在上图看到的，网格通常在右侧留有空白。

minmax()

我们将 100px 替换为 minmax(100px, 1fr)

将列宽 替换为 minmax(100px, 1fr)

因此，现在每列将至少为 100px。但如果有更多的可用空间，栅格布局将简单地将其均分给每列，因为这些列变成了 fraction 单位，而不是 100px。

添加图片： 给图片设置属性 object-fit: cover;

    .container div img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

图片会被剪裁：这将使图片覆盖它的整个容器，根据需要，浏览器将会对其进行裁剪

图片的剪裁

[grid-]row-gap属性：设置行间距
[grid-]column-gap属性：设置列间距
[grid-]gap属性：设置行和列间距, 是上两个属性的合写，先行间距后列间距

   .container{
            display: grid;
            grid-template-columns: [c1] 100px [c2] auto [c3] 100px [c4]; 
            grid-template-rows: repeat(6, 100px);
            gap: 20px; /* 设置行间距和列间距都是20px */
        }

设置行和列间距

grid-auto-flow 属性: 设置放置顺序，默认是row,先行后列
可能值： row, column, row dense, column dense
grid-auto-flow: row; 先行后列，默认
grid-auto-flow: column; 先列后行
grid-auto-flow: row dense; 某些项目指定位置以后，剩下的项目先行后列紧密填满，尽量不出现空格。
grid-auto-flow: column-dense; 某些项目指定位置以后，剩下的项目先列后行紧密填满，尽量不出现空格。

   .container{
            display: grid;
            grid-template-columns: repeat(auto-fill, 100px); /* 让我们跳过固定数量的列，将3替换为自适应数量 */
            gap: 20px; /* 设置行间距和列间距都是20px */
        }

grid-auto-flow: row; 单行，容器宽不够

   .container{
            display: grid;
            grid-template-columns: repeat(auto-fill, 100px); 
/* 让我们跳过固定数量的列，将3替换为自适应数量 */
            gap: 20px; /* 设置行间距和列间距都是20px */
            grid-auto-flow: column;
        }

grid-auto-flow: column; 单行，容器宽足够大

grid-auto-flow:column;

   display: grid;
   grid-template-columns: repeat(auto-fill, 100px);
   grid-template-rows: repeat(2, 100px);
   gap: 20px; 
   grid-auto-flow: column;

grid-auto-flow: column; 两行

        #container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-flow: row;
        }

        .item {
            font-size: 4em;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

        .item-1 {
            background-color: #ef342a;
            grid-column-start: 1;
            grid-column-end: 3;
        }

        .item-2 {
            background-color: #f68f26;
            grid-column-start: 1;
            grid-column-end: 3;
        }

指定第一个和第二个项目各占两个单元格，默认grid-auto-flow: row;效果如下

指定第一个和第二个项目各占两个单元格 grid-auto-flow: row;

指定第一个和第二个项目各占两个单元格 grid-auto-flow:column;

指定第一个和第二个项目各占两个单元格 grid-auto-flow:row dense;

指定第一个和第二个项目各占两个单元格 grid-auto-flow:column dense;

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-items属性设置单元格内容的水平位置（左中右）
align-items属性设置单元格内容的垂直位置（上中下）
place-items是align-items和justify-items的合并简写形式
place-items: ;

• start：对齐单元格的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部居中。
• stretch：拉伸，占满单元格的整个宽度（默认值）

        #container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-flow: column dense;
            justify-items: start;
        }

        .item {
            font-size: 2em;
            text-align: center;
            border: 1px solid #e5e4e9;
        }

justify-items: start;

justify-items: end;

justify-items:center;

justify-items: stretch; 系统默认

        #container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-flow: column dense;
            align-items: start;
        }

align-items: start;

align-items: center;

align-items: end;

align-items:stretch; 系统默认

        #container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-flow: column dense;
            place-items: start end;
        }

place-items: start end;

justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

• start - 对齐容器的起始边框。
• end - 对齐容器的结束边框。
• center - 容器内部居中。
• space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
• space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
• space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

justify-content: start;

justify-content: center;

justify-content:end;

项目没有指定列宽时，justify-content:stretch;

项目指定列宽时，justify-content:stretch;不生效

justify-content:space-around;

justify-content: space-between;

justify-content: space-evenly;

grid-auto-columns: 50px;
grid-auto-rows: 50px;
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

       #container {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-auto-rows: 50px;
        }
      .item-8 {
            background-color: #d0e4a9;
            grid-row-start: 4;
            grid-column-start: 2;
        }

        .item-9 {
            background-color: #4dc7ec;
            grid-row-start: 5;
            grid-column-start: 3;
        }

grid-auto-rows: 50px;

项目属性
grid-column-start 属性，左边框所在的垂直网格线
grid-column-end 属性，右边框所在的垂直网格线
grid-row-start 属性，上边框所在的水平网格线
grid-row-end 属性， 下边框所在的水平网格线
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
z-index修改层级

  #container {
            display: grid;
            grid-template-columns: [header-start]100px 100px 100px[header-end];
            grid-template-rows: 100px 100px 100px;
            grid-template-areas: "a b c"
                                "d e f"
                                "g h i"
 }
.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}
.item-2{
  grid-column-start: span 2;
}

item-1指定为网格线的名字: grid-column-start: header-start; grid-column-end: header-end;

item-2指定跨越几个单元格： grid-column-start: span 2;

        .item-1 {
            background-color: #ef342a;
            grid-column-start: header-start;
            grid-column-end: header-end;
            grid-row-start: 1;
            z-index: 2;
        }

        .item-2 {
            background-color: #f68f26;
            grid-row-start: 1;
            grid-column-start: header-start;
            grid-column-end: header-end;
        }

两个项目指定位置一样，通过z-index修改层级显示，显示item-1

指定项目的区域： 指定项目一区域e grid-area: e;

justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

item-1: justify-self: start