【不一样的CSS】一文掌握 Grid 布局(长篇警告)

最新推荐文章于 2024-04-17 13:03:25 发布
最新推荐文章于 2024-04-17 13:03:25 发布
阅读量358 收藏 1
点赞数 1
分类专栏： 不一样的CSS 文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46163658/article/details/122005468
版权

写在前面

对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。

最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。

该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)

Grid 布局(网格布局)是 CSS 最新的也是最强大的一种布局方案。

文章概述

由于篇幅较长(请谨慎阅读)，下图涵盖了本篇文章的主要知识点

正文开始

基本概念

网格：网格是一组相交的水平线和垂直线，它定义了网格的列和行，我们可以将网格元素放置在与这些行和列相关的位置上。

网格容器: 所谓的网格容器就是所有网格项的父元素，其 display 的值 为 grid。

网格项: 即网格容器的子元素(不包含子元素的子元素)。

网格线: 即组成网格项的分界线，Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。 例如下面这个三列两行的网格中，就拥有四条纵向的网格线。

网格轨道: 一个网格轨道就是网格中任意两条线之间的空间。在下图中你可以看到一个高亮的轨道——网格的第一个行轨道。

1_Grid_Track

网格单元: 两个相邻的列网格线和两个相邻的行网格线组成的是网格单元。在下面的图中，我会将第一个网格单元作高亮处理。

1_Grid_Cell

网格区域: 四个网格线包围的总空间。下图高亮的网格区域扩展了2列以及2行。

1_Grid_Area

fr (单位): 剩余空间分配数。用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。

容器属性

display 属性

display 属性用于指定一个容器采用网格容器。语法如下：

.container {
  display: grid | inline-grid;
  /*
  	* grid: 生成块级网格
  	* inline-grid: 生成行内网格
  */
}

值得注意的是设为网格容器时，网格项的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等设置都将失效。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>display 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

init.css

body { margin: 0; padding: 20px; }
.item { height: 300px; width: 300px; line-height: 300px; text-align: center; font-size: 140px; }
.item1 { background-color: #e6005c; }
.item2 { background-color: #777bce; }
.item3 { background-color: #c9780c; }
.item4 { background-color: #fffae8; }
.item5 { background-color: #ce3b3b; }
.item6 { background-color: #e666ff; }
.item7 { background-color: #f4ea20; }
.item8 { background-color: #b4a4ca; }

执行结果如下：

image-20210508214141493

grid-template

1. grid-template-columns 属性 和 grid-template-rows 属性

grid-template-columns 属性 和 grid-template-rows 属性,用来指定网格的列宽以及行高，以空格分隔，语法结构如下：

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

属性值

  • 轨道大小(track-size): 可以使用任意 css 长度、百分比、或者分数、或者 fr 单位。
  • 网格线名字(line-name): 可以选择任意名字

示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 300px auto 300px 20%;
                grid-template-rows: 1fr 1fr;
            }
            .item2,
            .item3,
            .item6,
            .item7 {
                width: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

执行结果如下所示：

image-20210508222658446

2. 网格线的名称

grid-template-columns 属性 和 grid-template-rows 属性 里面，还可以使用方括号 [] ，指定每一根网格线的名字，方便以后的引用。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>网格线的名称</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 700px;
                margin: 0 auto;
                grid-template-columns: [c1] 320px [c2] 3fr [c3] 2fr [c4] 20% [c5];
                grid-template-rows: [r1] 1fr [r2] 1fr [r3];
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

效果图如下：

image-20210508224148105

3. repeat() 函数

有的时候，我们需要编写同样的值，尤其是在网格多的时候，就显得尤为的麻烦，这个时候 repeat() 函数就帮助我们解决了这个问题。

该函数适用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows.语法规则如下：

.container {
  grid-template-columns: repeat(repeat, value);
}

属性值：

  • repeat: 表示重复的次数

    可选值：

    • number: 整数，确定确切的重复次数
    • auto-fill: 以网格项为准自动填充
    • auto-fit: 以网格容器为准自动填充

  • value: 表示重复的值

    可选值：

    • length: 非负长度
    • percentage: 相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。
    • flex: 单位为 fr 的非负维度，指定轨道弹性布局的系数值。

示例代码如下所示：

.container {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  /* 等于 */
  grid-template-columns: repeat(6, 1fr);
}
4. minmax() 函数

minmax() 函数定义了一个长宽范围的闭区间，该函数适用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows 语法规则如下：

.container {
  grid-template-columns: minmax(minValue, maxValue);
}

可选值：

  • length: 非负长度
  • percentage: 相对于列轨道中网格容器的内联大小的非负百分比，以及行轨道中网格容器的块长宽。
  • flex: 单位为 fr 的非负维度，指定轨道弹性布局的系数值。

示例代码如下所示：

.container {
  grid-template-columns: minmax(100px, 400px);
}

最小100px最大400px

5. grid-template-areas 属性

通过引用 grid-area 属性指定的网格区域的名称来定义网格模板。语法结构如下：

.contaienr {
  grid-template-areas: none |
    'grid-area-name | . grid-area-name | . grid-area-name | . ...'
    'grid-area-name | . grid-area-name | . grid-area-name | . ...'
}

属性值

  • grid-area-name: 使用 grid-area 属性设置的网格区域名称
  • . : 点号表示一个空网格单元
  • none: 没有定义网格区域。

示例代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template-areas 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                /* 1. 设置容器元素为 网格容器  */
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                /* 划分区域，当前区域为 三行 两列 */
                grid-template-areas:
                    'header header'
                    'nav main'
                    'footer footer';
                /* 3. 设置各区域的宽度和高度 */
                grid-template-columns: 300px 1fr;
                grid-template-rows: 200px auto 200px;
            }
            .item {
                width: auto;
                height: 200px;
                line-height: 200px;
            }
            .header {
                /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
                grid-area: header;
            }
            .nav {
                /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
                grid-area: nav;
            }
            .main {
                /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
                grid-area: main;
            }
            .footer {
                /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
                grid-area: footer;
            }
            .nav,
            .main {
                height: auto;
                line-height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item header">header</div>
            <div class="item2 item nav">nav</div>
            <div class="item3 item main">main</div>
            <div class="item4 item footer">footer</div>
        </div>
    </body>
</html>

执行结果如下：

image-20210509134334506

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

比如，区域名为 header ，则起始位置的水平网格线和垂直网格线叫做 header-start ，终止位置的水平网格线和垂直网格线叫做 header-end 。

grid-template 属性

该属性是 grid-template-rows 、 grid-template-columns 和 grid-template-areas 属性的简写。语法结构如下所示：

.container {
  grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]? ;
}

属性值

  • none: 将三个属性都设置为初始值，也就是一行一列一区域(了解)。
  • grid-template-rows / grid-template-columns: 把 grid-template-rows 和 grid-template-columns 设置为指定值，于此同时，设置 grid-template-areas 为 none
  • [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?: 设 grid-template-areas 为列得 <string> 、 grid-template-columns 为 <explicit-track-list> （默认为none）、 grid-template-rows 为 <track-size>（默认为auto）并拼接尺寸前后所定义之行。

示例代码如下所示：

grid-template-areas:
            'header header'
            'nav main'
            'footer footer';
grid-template-columns: 300px 1fr;
grid-template-rows: 200px auto 200px;

/* 简写如下 */

grid-template:
              [row1-start] 'header header' 200px [row1-end]
              [row2-start] 'nav main' auto [row2-end]
              [row3-start] 'footer footer' 200px [row3-end]
              / 300px 1fr;

上面两个代码最终的执行效果是相同的。

不过按照代码的可读性来看，并不推荐使用简写方式

gap 属性

gap 属性是 row-gap 和 column-gap 属性的简写。

该属性用于指定网格线的大小，可以想象为设置列 / 行之间的间距的宽度。语法结构如下：

.contianer {
  column-gap: <line-size>;
  row-gap: <line-size>;
  /* 如果省略第二个值，浏览器认为第二个值等于第一个值。 */
  gap: <line-size> <line-size>;
}

属性值

  • <line-size>: 长度值，例如 20px。

示例代码如下(基于上面那一段代码来写)：

.container {
  /* 写法 1 */
  column-gap: 10px;
  row-gap: 10px;
  /* 写法 2 */
  gap: 10px 10px;
  /* 写法 3 */
  gap: 10px;
}

执行结果如下：

image-20210509150302498

值得注意的是 gap 、column-gap 和 row-gap 属性在之前是有 grid- 的前缀的，即 grid-gap 、grid-column-gap 和 grid-row-gap。在使用的过程中，为了保证有效，我们可以这两个属性一起写。

items 属性

1. align-items 属性

沿着列轴对齐网格内的内容。语法结构如下：

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

属性值：

  • start: 内容与网格区域的顶端对齐
  • end: 内容与网格区域的底部对齐
  • center: 内容位于网格区域的垂直中心位置
  • stretch: 内容高度占据整个网格区域空间(默认值)
2. justify-items 属性

沿着行轴对齐网格内的内容。语法结构如下：

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

属性值：

  • start: 内容与网格区域的左端对齐
  • end: 内容与网格区域的右部对齐
  • center: 内容位于网格区域的水平中心位置
  • stretch: 内容宽度占据整个网格区域空间(默认值)
3. place-items 属性

place-items 是一个简写属性，使用此属性可以同时设置列轴对齐和行轴对齐，语法结构如下所示：

.container {
  place-items: align-items justify-items;
}

如果只写一个值，第二个值默认与第一个值相同。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>grid-template 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fef3c9;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                /* align-items 属性，控制网格项垂直对齐方式 */
                align-items: end;
                /* justify-items 属性，控制网格项水平对齐方式 */
                justify-items: center;
                /* 
                    place-items 属性，是 align-items 属性 和 justify-items 的简写形式 
                    如果只写一个值，第二个值默认与第一个值相同
                */
                place-items: end center;
            }
            .item {
                height: 200px;
                width: 200px;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

执行结果如下所示：

image-20210509165817094

content 属性

1. align-content 属性

设置网格容器内的网格沿着列轴对齐网格的对齐方式。语法结构如下：

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

属性值：

  • start: 网格与网格容器的顶部对齐
  • end: 网格与网格容器的底部对齐
  • center: 网格与网格容器的垂直中间对齐
  • stretch: 调整网格项的大小，让高度填充整个网格容器
  • space-around:在网格项之间设置均等高度的空白间隙,其外边缘间隙大小为中间空白间隙宽度的一伴
  • space-between:在网格项之间设置均等高度空白间隙，其外边缘无间隙
  • space-evenly:在每个网格项之间设置均等高度的空白间隙,包括外边缘
2. justify-content 属性

设置网格容器内的网格沿着行轴对齐网格的对齐方式。语法结构如下：

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

属性值：

  • start: 网格与网格容器的左部对齐
  • end: 网格与网格容器的右部对齐
  • center: 网格与网格容器的水平中间对齐
  • stretch: 调整网格项的大小，让高度填充整个网格容器
  • space-around:在网格项之间设置均等宽度的空白间隙,其外边缘间隙大小为中间空白间隙宽度的一伴
  • space-between:在网格项之间设置均等宽度空白间隙，其外边缘无间隙
  • space-evenly:在每个网格项之间设置均等宽度的空白间隙,包括外边缘
3. place-content 属性

place-content 属性是 align-content 和 justify-content 的简写属性，，语法结构如下所示：

.container {
  place-content: align-content justify-content;
}

如果只写一个值，第二个值默认与第一个值相同。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>content 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 1600px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: 300px 300px 300px 300px;
                grid-template-rows: 300px 300px;
                place-items: center;
                /* align-content 属性，控制网格容器垂直对齐方式 */
                align-content: space-around;
                /* justify-content 属性，控制网格容器水平对齐方式 */
                justify-content: space-around;
                /* 
                    place-content 属性，是 align-content 属性 和 justify-content 的简写形式 
                    如果只写一个值，第二个值默认与第一个值相同
                */
                place-content: space-around;
            }
            .item {
                height: 200px;
                width: 200px;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

执行结果如下图所示：

image-20210509174704749

grid-auto 属性

1. grid-auto-columns 属性 和 grid-auto-rows 属性

该组属性指定自动生成的网络轨道(隐式网络轨道)的大小

隐式网络轨道在显示的定位超出指定网格范围的行或列时被创建。

它们的写法与grid-template-columns和grid-template-rows相同。如果不指定此属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

2. grid-auto-flow 属性

该属性控制自动布局算法的工作方式。语法结构如下

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

属性值：

  • row: 告诉自动布局算法依次填充每行，根据需要添加新行
  • column: 告诉自动布局算法依次填充每列，根据需要添加新列
  • dense: 告诉自动布局算法，如果后面出现较小的网格项,则尝试在网格中填充空洞

grid 属性

grid 是一个CSS简写属性，可以用来设置以下属性：

显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，
隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，
间距属性 grid-column-gap 和 grid-row-gap。

语法结构如下：

.contaienr {
  grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;
}

该语法不易读，在实际开发中并推荐使用该语法。

网格项上的属性

start / end

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 这四个属性进行确定。

语法结构如下：

.item {
  /* 左边框所在的垂直网格线 */
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  /* 右边框所在的垂直网格线 */
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  /* 上边框所在的垂直网格线 */
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  /* 下边框所在的垂直网格线 */
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

属性值

  • <number>: 用数字来指代相应编号的网格线。
  • <name>:使用网格线名称来指代相应命名的网格线。
  • span <number>: 网格项将跨越指定数量的网格轨道
  • span <name>: 网格项将跨越一些轨道，直到碰到指定命名的网格线
  • auto: 自动布局，或者自动跨越，或者跨越一个默认的轨道

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>start / end</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 820px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item {
                line-height: 200px;
                height: 200px;
            }
            .item1 {
                /* 1. 纯数字写法 */
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 3;

                /* 2. 纯名字写法 */
                grid-column-start: c1;
                grid-column-end: c3;
                grid-row-start: r1;
                grid-row-end: r3;

                /* 3. 数字 + span 数字 */
                grid-column-start: 1;
                grid-column-end: span 2;
                grid-row-start: 1;
                grid-row-end: span 2;

                /* 4. 数字 + span 名字*/
                grid-column-start: 1;
                grid-column-end: span c3;
                grid-row-start: 1;
                grid-row-end: span r3;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

执行结果如下所示：

image-20210509194719268

值得注意的是如果没有声明 end 则默认将跨域一个轨道

示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>不声明 end</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 620px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item { line-height: 200px; height: 200px; }
            .item1 {
                grid-column-start: 2;
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

效果图如下：

image-20210509194917673

网格项如果相互重叠，可以使用 z-index 来控制它们的堆叠顺序

示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>堆叠</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 920px;
                height: 620px;
                margin: 0 auto;
                grid-template-columns: [c1] 300px [c2] 300px [c3] 300px [c4];
                grid-template-rows: [r1] 200px [r2] 200px [r3] 200px [r4];
                gap: 10px;
            }
            .item { line-height: 200px; height: 200px; }
            .item1, .item2 { width: auto; height: auto; }
            .item1 {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 3;
                /* 通过 z-index 控制堆叠顺序 */
                z-index: 2;
            }
            .item2 {
                grid-column-start: 2;
                grid-column-end: 4;
                grid-row-start: 1;
                grid-row-end: 3;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
            <div class="item5 item">5</div>
            <div class="item6 item">6</div>
            <div class="item7 item">7</div>
            <div class="item8 item">8</div>
        </div>
    </body>
</html>

效果图如下：

image-20210509195250297

2. grid-column 属性和 grid-row 属性

grid-column 属性是 grid-column-start 、grid-column-end 这两个属性的简写。

grid-row 属性是 grid-row-start 、grid-row-end 这两个属性的简写。

语法结构如下所示：

.item {
  grid-column: grid-column-start / grid-column-end;
  grid-row: grid-row-start / grid-row-end;
}

示例代码如下所示：

.item1 {
  /* 1. 纯数字写法 */
  grid-column: 1 / 3;
  grid-row: 1 / 3;

  /* 2. 纯名字写法 */
  grid-column: c1 / c3;
  grid-row: r1 / r3;

  /* 3. 数字 + span 数字 */
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;

  /* 4. 数字 + span 名字*/
  grid-column: 1 / span c3;
  grid-row: 1 / span r3;
}

grid-area 属性

grid-area 属性用来指定网格项的区域，该属性可以理解为是 grid-column-start 、grid-row-start 、grid-column-end 、grid-row-end 这四个属性的简写。语法结构如下所示：

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

属性值：

  • name: grid-template-areas 中定义的命名。
  • <row-start> / <column-start> / <row-end> / <column-end>: 值为 <number> | <name> | span <number> | span <name> | auto 其中一种。

示例代码如下所示：

.item1 {
  /* 
    第一个 1 表示 grid-row-start: 1
    第二个 1 表示 grid-columns-start: 1
    第一个 3 表示 grid-row-end: 3
    第二个 3 表示 grid-columns-end: 3
  */
  grid-area: 1 / 1 / 3 / 3;
}

效果图如下：

image-20210509194719268

self

1. align-self 属性

沿着列轴对齐网格项里面的内容，语法格式如下：

.container {
  align-self: start | end | center | stretch;
}
2. justify-self 属性

沿着行轴对齐网格项里面的内容，语法格式如下：

.container {
  justify-self: start | end | center | stretch;
}
2. place-self 属性

place-self 是一个简写属性，使用此属性可以同时设置列轴对齐和行轴对齐，语法结构如下：

.container {
  place-self: start | end | center | stretch;
}

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>self 属性</title>
        <link rel="stylesheet" href="./init.css" />
        <style>
            .container {
                background-color: #fffae8;
                display: grid;
                width: 800px;
                height: 800px;
                margin: 0 auto;
                grid-template-columns: repeat(2, 400px);
                grid-template-rows: repeat(2, 400px);
            }
            .item {
                /* 所有item都居中 */
                place-self: center;
            }
            .item1 {
                /* item1水平靠右 垂直靠上 */
                justify-self: end;
                align-self: start;
            }
            .item2 {
                /* item2水平靠左 垂直靠下 */
                justify-self: start;
                align-self: end;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1 item">1</div>
            <div class="item2 item">2</div>
            <div class="item3 item">3</div>
            <div class="item4 item">4</div>
        </div>
    </body>
</html>

执行结果如下所示：

image-20210509211320577

(完)

PS: 关于 Grid 布局有一个小游戏可以帮助我们练习 Grid Garden - 一个用来学CSS grid的游戏

一碗周.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html中的grid布局
人生苦短！
06-16 7231
所用小知识： 1、rem单位 1rem在html文本font-size默认为16px,根据字体大小改变 2、fr单位 自动根据比例改变列宽，不会产生水平方向的滚动条 3、grid-template-columns 指定多少列，各占多少，repeat（num,px/fr/rem）函数可快熟设置多少列多少宽 4、grid-row/columns-gap 设置行间距或列间距 5、grid-auto-rows 设置div高度，指定为100px,则每个div都为100px的固定高度，指定为minmax(100px，a
HTML布局之grid布局
weixin_43183219的博客
01-02 8187
容器、项目、行列、网格线、单元格、轨道的基本概念，容器属性、项目属性的详细介绍以及案例展示
HTMLCSS学习笔记（二十三）GRID布局
关注我！带你一路 "狂飙" 到底！
11-24 443
则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。有一定的相似性，都可以指定容器内部多个项目的位置。划分网格的线，称为"网格线"。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。6、设置单元格内容在单元格内 水平 | 垂直 的对齐方式。7、设置整个内容区域在容器里面的水平 | 垂直 对齐方式。容器里面的水平区域称为"行"，垂直区域称为"列"。行和列的交叉区域，称为"单元格"。
HTMLCSS学习笔记（二十三）GRID布局_html 网格布局，2024年最新下血本买的
最新发布
2401_83739777的博客
04-17 1084
所以，项目之间的间隔比项目与容器边框的间隔大一倍。注：新版本已经省略 grid- 前缀 row-gap \ column-gap \ gap。pace-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。grid-column-start属性：左边框所在的垂直网格线。grid-row-start属性：上边框所在的水平网格线。grid-row-end属性：下边框所在的水平网格线。
html grid 布局,grid布局
weixin_29525745的博客
07-03 449
grid布局，阮一峰写的非常详细。http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html我就不献丑了。我就大致总结一下缺点：相对于display：flex兼容性不好，不兼容于ie内核；这个制约了它的使用；不过它的思想非常好，如果改进了兼容性这个问题。完全可以替代flex布局display: grid指定一个容器采用网格布局。...
【html布局】grid布局
m0_67768261的博客
06-23 179
【html布局】grid布局
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS Grid 网格布局全解析
09-24
《CSS Grid 网格布局全解析》 CSS Grid（网格布局）是现代网页设计中一个强大的工具，它使得创建复杂、响应式的二维布局变得轻松简单。Grid布局摒弃了传统布局模式的限制，让我们可以自由地定义网页的行和列，以及...
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
5分钟教你学会 CSS Grid 布局
09-27
主要介绍了5分钟教你学会 CSS Grid 布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
12-13
上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...
grid布局demo.html
02-02
grid布局demo.html
animate-css-grid：CSS网格的无痛过渡
02-23
动画CSS网格 无缝设置所有CSS网格属性的动画，包括： grid-column和grid-row grid-template-columns grid-gap 使用此脚本可以轻松地将CSS网格从一种状态优雅地过渡到另一种状态。 如果网格的内容发生更改，或者通过添加或删除类来更新网格或其子级之一，则网格将自动过渡到其新配置。 如何使用它 只需在网格容器上调用wrapGrid方法，并可以选择提供一个配置对象作为第二个参数。 如果从页面上删除了网格，动画也将自动清除。 ES6模块： yarn add animate-css-grid或npm install animate-css-grid import { wrapGrid } from 'animate-css-grid' const grid = document . querySelector ( ".grid" ) ; wra
html网格布局
yjnlovepy的博客
01-28 1412
html网格布局
html中grid布局,CSS3 Grid布局
weixin_35977784的博客
06-17 263
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？基本介绍今天记录下css3的一个强大的功能：Grid。以往css框架 ( bootstrap、semantic ui、ant design ) 中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：html不够简洁。需要清除浮动以避免高度塌陷。列数是固定的，不能灵活定义。比如bootstrap是1...
html grid布局,css grid布局使用
weixin_28882363的博客
06-29 195
Note:设置网格布局后，容器子元素(项目)的float、display:inline-block、 display:table-cell、 vertical-align 和Column-*等设置都将失效2、grid-template-columns 属性grid-template-rows属性容器指定网格布局以后，接着就要划分行和列. gri-template-columns属性定义每一列的列宽...
HTML+CSS06 Grid布局
多啦的博客
07-21 353
文章目录与Flex的比较兼容性基本概念容器属性改变容器划分网格`fr`关键字`repeat`函数`auto-fill`关键字网格线名称网格间距划分区域网格填充顺序单元格内容对齐容器对齐缩写项目属性分配网格分配区域指定项目位置实例两栏布局圣杯布局参考 与Flex的比较 Flexbox是一维布局系统，适合做局部布局，比如导航栏组件。Grid是二维布局系统，通常用于整个页面的规划。 二者从应用场景来说并不冲突。虽然Flexbox也可以用于大的页面布局，但是没有Grid强大和灵活。二者结合使用更加轻松。 兼容性 兼
grid布局
weixin_42012282的博客
08-02 1025
1.背景介绍         CSS Grid(网格) 布局（又称为 “Grid(网格)” ），         是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，         但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float）         ，再是定位（postion）和内嵌块（inl...
css display:grid布局
09-14
使用CSS的display: grid布局可以创建一个网格布局，通过将元素放置在网格的列和行中来控制页面的布局。 当使用display: grid时，我们可以使用grid-template-columns属性来定义网格的列数和宽度。例如，grid-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗周.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值