网格布局是什么

CSS网格布局是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像flexbox那样主要是一维系统。你可以通过将CSS规则应用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。

利用`grid`布局可以轻松做出下边的布局

Grid 的一些基础概念

容器和项目

采用网格布局的元素叫做容器，容器元素的子集叫项目

<div class="wrapper">
    <div class="item one">one</div>
    <div class="item two">two</div>
    <div class="item three">three</div>
    <div class="item four">four</div>
    <div class="item five">five</div>
    <div class="item six">six</div>
    <div class="item seven">seven</div>
    <div class="item eight">eight</div>
    <div class="item nine">nine</div>
</div>

类似上边的代码wrapper类就是容器、他的子集几个item类就是项目

行和列

容器里面的水平区域就是行，垂直区域称就是列。

单元格

行和列交叉区域就是单元格，单元格的数量就是行数乘列数

网格线

划分网格的线就为网格线。水平网格线划分出行，垂直网格线划分出列。
如上图标注出来的就是网格线了 3行就有4条水平的网格线 3列就有4条垂直的网格线

容器属性

写在容器上的就是容器属性，写在项目上的就是项目属性

display

grid
创建一个网格容器，声明的网格容器是一个块级元素

1
2
3

.wrapper{
    display: grid;
}

inline-grid
创建一个网格容器，声明的网格容器是一个行内元素

1
2
3

.wrapper{
    display: inline-grid;
}

grid-template-columns 和 grid-template-rows

grid-template-columns设置列的宽度

grid-template-rows设置行的高度

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
}

设置列的宽度为 200px 200px 200px

设置列的高度为 124px 124px 124px

同时也设置了有三列但是行是不固定的它会根据项目的数量去变化

grid-row-gap 和 grid-column-gap

grid-row-gap 现在也可以写作row-gap 行之间的间距

grid-column-gap 现在也可以写作column-gap列之间的间距

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
    row-gap: 20px;
    column-gap: 20px;
}

他们可以简写为

.wrapper{
    gap: 20px; /*  行列之间的间距相同  */
    gap: 20xp 30px; /* 第一个为行之间的间距，第二个值为列之间的间距 */
}

grid-template-areas

grid-template-areas用于定义区域一个区域由多个或单个单元格构成

一般这个属性和项目属性的grid-area一起使用，它是用来指定项目应该放在那个区域

<style>
    .wrapper1{
        display: grid;
        grid-template-columns: 200px 500px 100px;
        grid-template-rows: 100px 500px 50px;
        gap: 10px;
        grid-template-areas:
                "header header header"
                "side content menu"
                "side footer footer";
    }
    .header{
        grid-area:header;
        background: aquamarine;
    }
    .side{
        grid-area:side;
        background: violet;
    }
    .content{
        grid-area:content;
        background: honeydew;
    }
    .menu{
        grid-area:menu;
        background: lawngreen;
    }
    .footer{
        grid-area:footer;
        background: blueviolet;
    }
</style>
<div class="wrapper1">
    <div class="header">header</div>
    <div class="side">side</div>
    <div class="content">content</div>
    <div class="menu">menu</div>
    <div class="footer">footer</div>
</div>

grid-auto-flow

如上图排列都是先排满一行才会排到下一行，要改变排列方式的话就要使用grid-auto-flow了，它的默认值为row,那改为column

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-flow: column;
}

可以看到他变了刚刚还还是 one、two、three….现在变成one、four、seven…从先行后列变为先列后行了

下边这个图five和four之间有一段空白，能看出来five太长了，那个空白放不下

那就可以这样写去解决这个问题grid-auto-flow: row dense;使用dense关键字表示尽可能填满所有空白

justify-items 和 align-items

justify-items 单元格内容的水平位置
align-items 单元格内容的垂直位置

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-flow: row dense;
    justify-items: stretch;
}

justify-items

关键字	描述	图述
start	对齐单元格的起始边缘
end	对齐单元格的结束边缘
center	单元格内部居中
stretch	拉伸，占满单元格的整个宽度（默认值）
align-items同理

justify-content 和 align-content

justify-content 整个内容区域在容器里面的水平位置
align-content 整个内容区域在容器里面的垂直位置

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-flow: row dense;
    justify-content: start;
    background: honeydew;
    border: 50px solid chartreuse;
}

justify-content

关键字	描述	图述
start	对齐单元格的起始边缘
end	对齐单元格的结束边缘
center	单元格内部居中
space-around	每个项目两侧的间隔相等
space-between	项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch	项目大小没有指定时，拉伸占据整个网格容器（默认值）
align-content同理

grid-auto-columns 和 grid-auto-rows

grid-auto-columns
grid-auto-rows
修改一下样式创建一个2*2的网格，这样的话我们就会有5个项目行是没有涉及到的

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 124px 124px;
    gap: 20px;
}

这样的话就可以使用grid-auto-rows来设置行高

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}

项目属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end

可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
grid-column-start 左边网格所在的垂直网格线
grid-column-end 右边网格所在的垂直网格线
grid-row-start 上边网格所在的水平网格线
grid-row-end 下边网格所在的水平网格线

.wrapper{
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}
.one{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    z-index: 1;
}
.two{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 1;
}

这样设置类.one和类.two会用重叠，则可以使用z-index来决定他们的层级关系

grid-area

grid-area 属性指定项目放在哪一个区域

justify-self 、align-self

他们两个的用法和justify-items属性的用法完全相同，但是只作用于单个项目

.one{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    justify-self: center;
}

常用函数、关键字

repeat() 函数

可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
上边常写的grid-template-columns: 200px 200px 200px;就可以简化为grid-template-columns: repeat(3,200px);

auto-fill

一般和repeat一起使用，表示让一行或者一列中尽可能容纳更多的单元格

grid-template-columns: repeat(auto-fill,200px);他表示列的宽度为200px但是数量不固定，只要能放得下就一直放

fr关键字

fr关键字是grid引入的一个新的单位。fr 单位代表网格容器中可用空间的一等份。比如grid-template-columns: 200px 1fr 2fr则就表示第一列宽200px后边的的剩余空间等分为三等份，第二列占这三等份的一等份，第二列占两等份

.wrapper{
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}

minmax() 函数

使用minmax函数可以生成一个长度范围，有两个参数,第一个为最小值，第二个为最大值。例如grid-template-columns: 200px 1fr minmax(300px,3fr)他就表示第三列最小也要占300px最大只能是第二列的三倍

.wrapper{
    display: grid;
    grid-template-columns: 200px 1fr minmax(300px,3fr);
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}

auto关键字

他表示由浏览器决定长度，例如grid-template-columns: 200px auto 200px;他就表示第二列的宽度由浏览器决定

.wrapper{
    display: grid;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}

.wrapper{
    display: grid;
    grid-template-columns: 200px auto auto;
    grid-template-rows: 124px 124px 124px;
    gap: 20px;
    grid-auto-rows: 200px;
}