grid布局笔记

最近挺忙的，准备考试，还有其他的事，没时间研究东西，快周末了，难得学点东西，grid是之前看到的，很好奇，讲的二维的布局，看起来很方便，应该很适合移动端布局，所以今天抽时间学一学，这个当是笔记了。参考的是阮老师的博客。

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

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

不系统的解释了，系统的看阮老师的博客，我再复述一遍没屁用。我这篇是总结一下我遇到的问题，顺便和flex做一下对比，方便以后回顾。

fr关键字：

grid-template-columns:150px 1fr 2fr

这个1fr 和 2fr和父容器宽度有关系，1fr 和2fr是会主动填补父容器宽度（类似flex里的basis属性），保证他们俩的宽度关系为1:2，但是他们和150px没有关系，150px始终为150px。

布局实例：

1.父容器中设置两个项目分别占七三比例

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}

这个是一维的，只有一行，所以flex也能够布局出来。(简写啥的看不懂的话可以去看我有一篇flex布局笔记)

.wrapper{
  display: flex;
}
.item1{
  flex:70%
}
.item2{
  flex:30%
}

好像grid方便一点哈，那就接着往下看哈。

2.传统十二网格布局

可以直接在容器上定义一个

display: grid;
grid-template-columns: repeat(12, 1fr);

就完事了。

flex布局虽然也是一维的，但是要分别定义容器还有项目

.warpper{
  display:flex
}
//前提12个项目的class都为item
.item{
  flex:1
}

各有千秋吧，但是flex强项就是一维的，grid强项在于二维布局。我接着看看二维的布局

控制边距

flex没有控制边距的特殊属性，都是自动的，如果想要就是加margin.但是grid加了gap属性，可以column-gap也可以row-gap

指定区域，合并多块

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

上面这个是默认的情况，九个单元格各司其职。谁都不理谁。

但是可以可以将他们更换变成

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

类似，如果将其中一块变成.的话，那.所属的区域傻东西都没有

表示没有用到该单元格，或者该单元格不属于任何区域

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

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

grid-auto-flow

跟flex的flow不一样，flow是wrap和nowrap还有wrap-reverse。而这个gird-auto-flow可以调整密度。

column dense和row dense可以自动填补竖向和横向的空白

剩下没啥东西了，记得东西偏多，感觉和flex差不多，都是比较方便的布局方式，多了二维操作和指定特殊的块儿的功能。

标签：flex,布局,100px,笔记,网格线,grid,template
来源： https://www.cnblogs.com/wangzirui98/p/11107268.html