Grid 网格二维布局---笔记

Grid 二维布局

基础知识

首先，你必须使用 display: grid 将容器元素定义为一个 grid(网格) 布局，使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小，然后通过 grid-column 和 grid-row 将其子元素放入这个 grid(网格) 中。

重要术语

1. 网格容器(Grid Container)
2. 网格项(Grid Item)
3. 网格线(Grid Line)
4. 网格轨道(Grid Track)
5. 网格单元格(Grid Cell)
6. 网格区域(Grid Area)

网格容器(Grid Container)

应用 display: grid 的元素。这是所有 网格项（grid item）的直接父级元素。在这个例子中，container 就是 网格容器(Grid Container)。

网格项(Grid Item)

网格容器（Grid Container）的子元素（例如直接子元素）。这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。

网格线(Grid Line)

构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线

网格轨道(Grid Track)

两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条 行网格线 之间的 网格轨道(Grid Track)。

网格单元格(Grid Cell)

两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第 1 至第 2 条 行网格线 和第 2 至第 3 条 列网格线 交汇构成的 网格单元格(Grid Cell)。

网格区域(Grid Area)

4条网格线包围的总空间。一个 网格区域(Grid Area) 可以由任意数量的 网格单元格(Grid Cell) 组成。下图是 行网格线1和3，以及列网格线1和3 之间的网格区域。

属性认识

网格容器(Grid Container) 属性

1. display: display: grid | inline-grid;将元素定义为网格容器，并为其内容建立新的 网格格式上下文。
2. grid-template-columns:使用空格分隔的值列表，用来定义网格的列的尺寸大小，这些值表示的是网格轨道的大小，他们之间的空格表示网格线

• grid-template-rows:使用空格分隔的值列表，用来定义网格的行的尺寸大小，这些值表示的是网格轨道的大小，他们之间的空格表示网格线
• css代码：

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

3. grid-auto-columns / grid-auto-rows

• 指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。

4. 网格之间的间距 （gap） 后一个的属性为前两个的缩写
   grid-row-gap/gird-columns-gap

gid-gap：

与行轴、列轴对齐的属性
align-items/justify-items

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

网格项(Grid Items) 属性

更详细的属性下方链接

1. grid-column：

定义列占据网格线的起，终点位置。

• grid-column-start: 1;
• grid-column-end: 4;

上面代码可以缩写成：

grid-columns: 1 / 4 /* 指的是网格项从网格线起点和终点 */
 // 其他不同的写法
 grid-columns 1 / span 4 /*指的是网格项从网格线1的位置横跨4个*/

• 同理:
  
  grid-row的含义与上面相同

grid-row-start、grid-row-end

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

• ：你所选的名称
• / / / ：数字或分隔线名称

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

css 代码

.item-d {
    grid-area: 1 / col4-start / last-line / 6
}

• justify-self/align-self:

沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self ，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。

.item {
  justify-self: start | end | center | stretch;
}

• place-self: 是设置 align-self 和 justify-self 的简写形式。

grid 属性的缩写

属性值，在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。

• none: 将所有子属性设置为初始值
• ：与grid-template 简写的工作方式相同
• / [ auto-flow && dense? ] ? ：将grid-template-rows 设置为指定的值。 如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为 column。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 算法。 如果省略 grid-auto-columns ，则将其设置为 auto。
• [ auto-flow && dense? ] ? / ：将 grid-template-columns 设置为指定值。 如果 auto-flow 关键字位于斜杠的左侧，则会将grid-auto-flow 设置为 row 。 如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 打包算法。 如果省略 grid-auto-rows ，则将其设置为 auto

以下两个代码块是等效的
css代码

.container {
  grid: 100px 300px / 3fr 1fr;
}

css代码

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

自己敲的案例

其他高级用法，下发链接

第一种方式
html代码:

    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">7</div>
        <div class="item9">7</div>
        <div class="item10">7</div>
    </div>

css代码：

.wrapper{
            width: 90%;
            max-width: 960px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(4,50px);
            grid-gap: 10px;
        }
        .wrapper div{
            border:1px solid red;
        }   
        .item1 {
            grid-column-start: 1;
            grid-column-end: 5;
        }
        .item4 {
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 5;
        }
        .item6 {
            grid-column: 1 / 3 ;
        }

第二种方式：
html代码：

    <div class="wrapper2">
        <div class="box-a">1</div>
        <div class="box-c">3</div>
        <div class="box-d">4</div>
        <div class="box-k">11</div>
        <div class="box-i">9</div>
        <div class="box-g">7</div>
        <div class="box-b">2</div>
        <div class="box-e">5</div>
        <div class="box-f">6</div>
        <div class="box-h">8</div>
        <div class="box-j">10</div>
    </div>

css代码：

        .box-a{
            grid-area: header;
        }
        .box-b{
            grid-area: section1;
        }
        .box-c{
            grid-area: section2;
        }
        .box-d{
            grid-area: section3;
        }
        .box-e{
            grid-area: section4;
        }
        .box-f{
            grid-area: section5;
        }
        .box-g{
            grid-area: section6;
        }
        .box-h{
            grid-area: section7;
        }
        .box-i{
            grid-area: section8;
        }
        .box-j{
            grid-area: section9;
        }
        .box-k{
            grid-area: section10;
        }
        .wrapper2{
            width: 90%;
            margin: 30px auto;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(4, 50px);
            grid-gap: 10px;
            grid-template-areas: 
            "header header header header" 
            "section1 section2 section3 section4" 
            "section5 section6 section3 section7" 
            "section8 section9 section3 section10";
        }
        .wrapper2 div{
            border:1px solid red;
            
        } 

CSS Grid 布局完全指南(图解 Grid 详细教程)