css grid布局属性详解

Grid布局

前言
一、认识Grid
- 1.1容器和项目
- 1.2行和列
- 1.3单元格和网格线
二、容器属性
- 2.1.grid-template-columns与grid-template-rows属性
- - 2.1.1 直接使用长度单位比如px
  - 2.1.2 使用百分比 %
  - 2.1.3 使用repeat函数
  - 2.1.4 按比例划分 fr 关键字
  - 2.1.5 自动填充 auto 关键字
  - 2.1.6 最大值和最小值minmax
- 2.2 gap属性
- 2.3 grid-template-areas 属性
- 2.3 grid-auto-flow 属性
- 2.4 单元格对其方式justify-items、align-items、place-items属性
- 2.5 整个内容区域对其方式 justify-content、align-content、place-content属性
- 2.6. grid-auto-columns和grid-auto-rows属性

前言

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

CSS Grid布局提供了更直观的网格化布局方式，使得响应式设计和复杂页面结构的实现更加简单和高效。

Flex 布局是轴线布局，可以看作是一维布局。
Grid 布局则是将容器划分成行和列，产生单元格，可以看作是二维布局。
Grid 布局远比 Flex 布局强大。

一、认识Grid

实现一个九宫格布局
css代码

        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        body{
            padding: 2%;
        } 
        li{
            text-align: center;
            padding: 10px;
        }

        li:nth-child(1) {
            background-color: red;
        }

        li:nth-child(2) {
            background-color: blue;
        }

        li:nth-child(3) {
            background-color: green;
        }

        li:nth-child(4) {
            background-color: yellow;
        }

        li:nth-child(5) {
            background-color: pink;
        }

        li:nth-child(6) {
            background-color: purple;
        }

        li:nth-child(7) {
            background-color: orange;
        }

        li:nth-child(8) {
            background-color: aqua;
        }

        li:nth-child(9) {
            background-color: gray;
        }

html代码

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>

效果图
请添加图片描述
ul的css代码

        ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }

效果图
在这里插入图片描述

1.1容器和项目

上面例子中ul就是容器，里面的li就是项目
注意：项目只能是容器的顶层子元素，不包含项目的子元素。

1.2行和列

水平为行(row)，垂直的为列(column)
上面例子中123就是行，147就是列

1.3单元格和网格线

行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
正常情况下，n行有n + 1根水平网格线，m列有m + 1根垂直网格线，比如三行就有四根水平网格线。

二、容器属性

使布局变为网格布局
display: gird：块级元素。
display: inline-grid：行内元素。
在这里插入图片描述

2.1.grid-template-columns与grid-template-rows属性

grid-template-columns属性定义每一列的列宽，
grid-template-rows属性定义每一行的行高。

2.1.1 直接使用长度单位比如px

        ul {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 60px 60px 60px;
        }

在这里插入图片描述
上面表示一个三行三列的网格，列宽为100px,行高为60px。

2.1.2 使用百分比 %

        ul {
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            grid-template-rows: 33.33% 33.33% 33.33%;
        }

在这里插入图片描述

2.1.3 使用repeat函数

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。
比如上面的%可以简写为repeat(3, 33.33%)，意思表示分三行，每一行占33.3%

repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
repeat()重复某种模式也是可以的。
repeat(2, 160px 40px 100px) 表示一行占160px,第二行占40px，第三行占100px，并且重复两次，也就是分6行

        ul {
            display: grid;
            grid-template-columns: repeat(2, 160px 40px 100px);
        }

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/56be003a894843608f2f752f6b52051b.png

2.1.4 按比例划分 fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍，1fr 2fr表示总共分了3分，前者占1/3后者占2/3。
使用过三方ui库的比如Bootstrap,应该清楚网格布局(Layout )是按24等份来划分的，这里可以看做第一列划分了8等份，第二列划分了16等份。

fr也可以与绝对长度的单位结合使用，

        ul {
            display: grid;
            grid-template-columns: 150px 1fr 2fr;
        }

请添加图片描述
看到这里是不是想到了什么？没错那就是三栏布局，左右固定，中间自适应可以直接这样写grid-template-columns: 150px 1fr 150px;

2.1.5 自动填充 auto 关键字

auto 表示由浏览器自己决定长度。

        ul {
            display: grid;
            grid-template-columns: auto 1fr 2fr;
        }

请添加图片描述
上面例子中第一列的宽度由其内容决定，第二、三列则占据剩余的空间

与fr的区别
fr 适用于分配剩余空间，不受内容大小限制。
auto 适用于内容驱动的大小调整，通常用于使列或行根据内容的实际需要调整其大小。

auto-fill属性：只能应用在repeat函数中的第一个参数，比如repeat(auto-fill, 30%);表示自动填充每一份占30%，未分配的空间将空余

        ul {
            display: grid;
            grid-template-columns:repeat(auto-fill, 30%);
            border: 1px solid red;
        }

在这里插入图片描述

2.1.6 最大值和最小值minmax

当空间满足时，显示最大值
当空间不足时，使用最小值
当空间不满足最大值且大于最小值时，则取值为最小值与最大值中间的值

        ul {
            display: grid;
            grid-template-columns: 200px 100px minmax(100px, 400px);
            border: 1px solid red;
        }

请添加图片描述

上面例子中minmax(100px, 400px) 表示列宽不小于100px，不大于400px。

2.2 gap属性

row-gap：行与行的间隔（行间距）
column-gap：列与列的间隔（列间距）
gap：column-gap和row-gap的合并简写形式

        ul {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border: 1px solid red;
            row-gap: 10px;
            column-gap: 10px;
        }

在这里插入图片描述
上面代码可以简写为gap: 10px；

2.3 grid-template-areas 属性

grid-template-areas 用于为网格容器中的网格轨道（列和行）定义命名区域，然后通过每个子项的 grid-area 属性，将它们与对应的区域名称关联起来

为每个网格项命名
首先，在定义网格容器的时候为每个网格项分配一个区域名称，可以使用引号和空格来表示每一行，用句点 . 来表示空区域。

        ul {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
            grid-template-areas:
                "header header header"
                "nav main main"
                "nav main main"
                "footer footer footer";
            border: 1px solid red;
            gap: 10px;
        }

将网格项关联到区域名称

        .header {
            grid-area: header;
            background-color: #f2f2f2;
        }

        .nav {
            grid-area: nav;
            background-color: #d5e8d4;
        }

        .main {
            grid-area: main;
            background-color: #cce5ff;
        }

        .footer {
            grid-area: footer;
            background-color: #ffb3ba;
        }

实现网格布局

    <ul>
        <div class="header">Header</div>
        <div class="nav">Nav</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer</div>
    </ul>

实现效果图
在这里插入图片描述

2.3 grid-auto-flow 属性

grid-auto-flow属性调整网格的排列方向，默认值为row是横着排列，可以设置成column竖着排列

        ul {
            display: grid;
            grid-template-rows: repeat(3, 1fr);
            border: 1px solid red;
            grid-auto-flow: column;
            gap: 10px;
        }

在这里插入图片描述

2.4 单元格对其方式justify-items、align-items、place-items属性

justify-items：单元格水平方向(左中右)
align-items：单元格垂直方向(上中下)
place-items：单元格垂直方向单元格水平方向

属性可以取下面这些值

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

        ul {
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            justify-items: start;
            align-items: end;
        }

在这里插入图片描述
上面代码相当于place-items:end start; 如果省略第二个值，则浏览器认为与第一个值相等。

2.5 整个内容区域对其方式 justify-content、align-content、place-content属性

justify-content：整个内容区域在容器里面的水平位置(左中右）
align-content：整个内容区域的垂直位置(上中下）
place-content：整个内容区域垂直方向整个内容区域水平方向

属性可以取下面这些值

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

        ul {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            align-content: center;
            justify-content: center;
            border: 1px solid red;
        }

在这里插入图片描述
当然也可以这样写place-content：center,如果省略第二个值，浏览器就会假定第二个值等于第一个值。

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

grid-auto-columns:定义在网格容器中隐式创建的列的大小
grid-auto-rows:定义在网格容器中隐式创建的行的大小。

        ul {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-rows: repeat(3, 100px);
            grid-template-columns: repeat(3, 100px);
            gap: 10px;
            place-content: center;
            border: 1px solid red;
            grid-auto-columns: 40px;
            grid-auto-rows: 40px;
        }

在这里插入图片描述
这个例子中第10项是多余的，没有设置宽高，就采用了grid-auto-columns属性和grid-auto-rows属性设置的列宽和行高。

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

参考：阮一峰CSS Grid 网格布局教程