终于把grid布局理清楚了【2021.11.16】

一开始我是自己看文档学的grid，每次用的时候感觉都不自然，要想半天这个代码是干啥的，我这个是错误的使用方法，我们应该想先想明白你要让项目呈现什么样的布局，再来思考代码，而不是看着代码想它能干啥。

然后今天看b站up主耕耕技术宅讲解的grid后，豁然开朗，感觉很有用，然后分享给大家。原视频链接

言归正传，我们得先弄明白，grid布局到底是什么样的，下面这张图，可以让我们理清楚：

 弄明白概念之后再对症下代码即可：

如我想让要让项目布局为三列且宽度为容器宽度的三等分：

grid-template-columns:1fr 1fr 1fr;

或者grid-template-columns:repeat(3,1fr);

说到列的宽度，这里介绍一个函数minmax(最小值，最大值),它的作用是规定一个长度范围，列的宽度不会超过最小值，也不会大于最大值。

那个我们想对内容下手呢？

就可以使用 Justify-content  /  align-content  /  place-content

什么意思呢，第一个是设置整个内容区域的水平对齐方式，可以是start,center,stretch,space-aroud,space-between,space-evenly

第二个就是设置整个内容区域的垂直对齐方式

第三个是前面两个的简写

好了，扯多了，本篇博客的目的就是想告诉大家，我们要对症下代码，想清楚你想对什么内容做出调整再去找对应的代码。