耶温笔记

外观

Grid - 网格布局

2623字约9分钟

2024-05-09

CSS-Grid网格布局

display:grid; 开启Gird布局（现在浏览器内置grid布局，但是存在兼容性问题）

  • 采用 grid 布局的区域，称为容器，内部的子元素，称为项目。
  • 比如下面例子中 div.grid 为容器，里面的 div.demo 为项目

容器属性

1. display

display:grid或者display:inline-gird表示块级或者行内元素。

  • 块级元素：使用 display: grid; 的元素是一个块级元素。这意味着它会占据其父元素的全部宽度，并且在其前后产生换行。
  • 行内元素：使用 display: inline-grid; 的元素是一个行内元素。这意味着它只会占据其内容所需的宽度，并且不会在其前后产生换行。

css代码：

.grid {
    display: grid;
    /* or display:inlie-gird; */
    grid-template-rows: 100px 100px 100px ;
    grid-template-columns: 100px 100px 100px ;
}

.demo {
    background-color: #eee;
}

html代码：

<body>
    <span class="left">left</span>
    <div class="grid">
        <div class="demo">1</div>
        <div class="demo">2</div>
        <div class="demo">3</div>
        <div class="demo">4</div>
        <div class="demo">5</div>
        <div class="demo">6</div>
        <div class="demo">7</div>
        <div class="demo">8</div>
        <div class="demo">9</div>
    </div>
    <span class="right">right</span>
</body>

块级元素：

Grid 代码演示
<body>
    <span class="left">left</span>
    <div class="grid">
        <div class="demo">1</div>
        <div class="demo">2</div>
        <div class="demo">3</div>
        <div class="demo">4</div>
        <div class="demo">5</div>
        <div class="demo">6</div>
        <div class="demo">7</div>
        <div class="demo">8</div>
        <div class="demo">9</div>
    </div>
    <span class="right">right</span>
</body>
.grid {
    display: grid;
    /* or display:inline-gird; */
    grid-template-rows: 100px 100px 100px ;
    grid-template-columns: 100px 100px 100px ;
}

.demo {
    background-color: pink;
    margin: 10px;
}

行内块元素：

Grid 代码演示
<body>
    <span class="left">left</span>
    <div class="grid">
        <div class="demo">1</div>
        <div class="demo">2</div>
        <div class="demo">3</div>
        <div class="demo">4</div>
        <div class="demo">5</div>
        <div class="demo">6</div>
        <div class="demo">7</div>
        <div class="demo">8</div>
        <div class="demo">9</div>
    </div>
    <span class="right">right</span>
</body>
.grid {
    display:inline-grid;
    grid-template-rows: 100px 100px 100px ;
    grid-template-columns: 100px 100px 100px ;
}

.demo {
    background-color: pink;
    margin: 10px;
}

2. grid-template-rows和grid-template-columns和grid-template

  • grid-template-columns：定义网格容器中列的数量和宽度。可以使用绝对单位（如 px、em）、相对单位（如 %）或 fr（分数单位）来指定行的高度。

  • grid-template-rows：定义网格容器中行的数量和高度。同样可以使用绝对单位、相对单位或 fr 来指定列的宽度。

  • grid-template：定义行列数量和高度，上面两个属性的组合写法。

//定义三行三列宽高一百的盒子
.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    /* or  grid-template:100px 100px 100px / 100px 100px 100px */
}
  • repeat()：重复值，可以使用语法repeat(重复次数，重复的值)
    • 在repeat中可以使用auto-fill,根据容器大小，自动填充满单元格
.grid {
    display: grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px)
}

以上两种方式，可以创建一个3*3的宽高100的盒子

Grid 代码演示
<div class="grid">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <div class="demo">4</div>
    <div class="demo">5</div>
    <div class="demo">6</div>
    <div class="demo">7</div>
    <div class="demo">8</div>
    <div class="demo">9</div>
</div>
.grid {
    display:grid;
    grid-template-rows: repeat(3,100px);
    grid-template-columns: repeat(3,100px)
}

.demo {
    background-color: pink;
    margin: 10px;
}
.grid {
        display: grid;
        grid-template-rows: repeat(4, 100px);
        /* 自适应 充满行或者列 */
        grid-template-columns: repeat(auto-fill, 200px)
}

使用auto-fill，创建，会根据屏幕尺寸，自适应列的数目：

Grid 代码演示
<div class="grid">
    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="demo">3</div>
    <div class="demo">4</div>
    <div class="demo">5</div>
    <div class="demo">6</div>
    <div class="demo">7</div>
    <div class="demo">8</div>
    <div class="demo">9</div>
</div>
.grid {
    height: 500px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 100px);
    grid-template-columns: repeat(auto-fill, 100px)
}

.demo {
    background-color: pink;
    margin: 10px;
}
  • fr关键字：表示倍数关系
.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 1fr 2fr;
}

如下图，第三列的宽度是第二列的二倍，并且，第二列第三列的宽度会根据屏幕尺寸变化。

fr

  • minmax()：表示长度范围，接受两个参数，最大值和最小值

    • 比如： grid-template-rows: minmax(100px,1fr)

  • auto：自动平均分配剩余空间，或者占满空间

    • 比如：grid-template-columns: 100px auto;

  • 网格线中名称

如下所示 中括号中的 c1-c4 r1-r4 表示三行三列布局中的四条横线 和 四条竖线，即网格线的名称

.grid {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
}

3. gird-row-gap,gird-column-gap,gird-gap

设置行列之间的间距 gird-gap为以上两个属性的缩写

  • gird-row-gap：设置行与行之间的间距，行间距
  • gird-column-gap：设置列与列之间的间距，列间距
  • gird-gap：合并简写 gird-gap: <gird-row-gap> <gird-column-gap>

注意

根据最新标准，以上属性前缀已经删除，现在可以写为： row-gap, column-gap和 gap

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    row-gap: 20px;
    column-gap: 40px;
    /* or gap:20px 40px */
}

上面代码展示效果如下图：

行列边距

4. gird-template-areas

grid-template-areas CSS 属性是网格区域 grid areas 在CSS中的特定命名。即自定义区域

  • gird-template-areas：自定义区域
  • 不需要的区块可以使用 . 省略，例如下面代码
.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
    gap: 20px 40px;
    grid-template-areas: "header header header"
        "main main sidebar"
        "footer main sidebar";
     /* grid-template-areas: "header header header"
        "main . sidebar"
        "footer . sidebar"; */
}

注意

注意，区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end。

5. gird-auto-flow

设置布局中的项目，是先行排列还是先列排列 取值：

  • row：逐行填充，默认值
  • column：逐列排列项目
  • row dense和column dense：堆积算法，会填充网格中的空白。

注意

dense： 该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

示例代码：

点击显示代码

html

   <div class="grid">
        <div class="demo">1</div>
        <div class="demo">2</div>
        <div class="demo1">3</div>
        <div class="demo1">4</div>
        <div class="demo1">5</div>
        <div class="demo1">6</div>
        <div class="demo1">7</div>
        <div class="demo1">8</div>
        <div class="demo1">9</div>
    </div>

css


.grid {
    display: grid;
    gap: 20px;
    grid-template: repeat(4, 100px) / repeat(3, 100px);
    grid-auto-flow: row ;
    /* column  or  row dense  or column dense */
}

.demo {
    background-color: #ddd;
    grid-column-start: 1;
    grid-column-end: 3;
}

.demo1 {
    background-color: pink;
}

当grid-auto-flow设置为row时：

grid-auto-flow

当grid-auto-flow设置为column时：

grid-auto-flow

当grid-auto-flow设置为row dense时：

grid-auto-flow

6. justify-items,align-items和place-items

  • justify-items： 设置单元格内容的水平位置
  • align-items： 设置单元格内容的垂直位置
  • place-items： 水平垂直位置合写,如果忽略第二个值，则默认两个值相等，都为第一个值

属性值：

  • start： 对齐容器的起始边框
  • end： 对齐容器的结束边框
  • center： 对齐容器的起始边框
  • stretch： 大小没有指定时，拉伸占据整个网格容器（默认）

7. justify-content,align-content和place-content

  • justify-content： 整个内容区域在容器里面的水平位置
  • align-content： 整个内容区域在容器里面的垂直位置
  • place-content： 水平垂直位置合写,如果忽略第二个值，则默认两个值相等，都为第一个值

属性值：

  • start： 对齐容器的起始边框
  • end： 对齐容器的结束边框
  • center： 对齐容器的起始边框
  • stretch： 大小没有指定时，拉伸占据整个网格容器
  • space-around： 每个项目两侧的间隔相等
  • space-between： 项目与项目的间隔相等，项目与容器边框之间没有间隔
  • space-evenly： 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

8. grid-auto-columns和grid-auto-rows

用来设置，浏览器自动创建的多余网格的列宽和行高，与grid-template-rows和grid-template-columns用法一致。

  • grid-auto-columns：用来设置，浏览器自动创建的多余网格的列宽
  • grid-auto-rows：用来设置，浏览器自动创建的多余网格的行高

如下面代码所示：

.grid {
    display: grid;
    gap: 10%;
    grid-template: repeat(2, 100px) / repeat(2, 45%);
    grid-auto-rows: 50px;
}

grid-auto-rows

9. grid和grid-template

不太建议 合写这么多属性

  • grid：grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow合写

  • grid-template：grid-template-columns、grid-template-rows和grid-template-areas的合写,中间用斜杠分割

项目属性

1. grid-column-start,grid-column-end,grid-row-start,grid-row-end

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

  • grid-column-start：左边框所在的垂直网格线(可以使用)
  • grid-column-end：右边框所在的垂直网格线
  • grid-row-start：上边框所在的水平网格线
  • grid-row-end：下边框所在的水平网格线

例如：

.grid {
    display: grid;
    gap: 10%;
    grid-template: repeat(4, 100px) / repeat(3, 100px);
    justify-content: center;
}
.demo {
    background-color: #ddd;
}
.demo1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    background-color: pink;
}

grid项目位置

2.grid-column和grid-row

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>;

3. grid-area

指定项目放在哪一个区域。

  • grid-area: <grid-area-name>

  • grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

例如：

.grid {
    display:  grid;
    gap: 10%;
    grid-template: repeat(3, 100px) / repeat(3, 100px);
    grid-template-areas: "a b c"
                            "d e f"
                            "g h i";
}
.demo {
    background-color: #ddd;
}
.demo1 {
    grid-area: f;
    background-color: pink;
}

grid指定位置

4. justify-self,align-self和place-self

  • justify-self: 属性设置单元格内容的水平位置（左中右)
  • align-self: 属性设置单元格内容的垂直位置（上中下）
  • 取值： start | end | center | stretch

place-self

place-self属性是align-self属性和justify-self属性的合并简写形式。

place-self: <align-self> <justify-self>