68. 说说grid布局和flex布局，grid布局和flex布局优劣势，各有什么适用场景？

[goldEli]

Grid 和 Flex 都是用来做布局的，可以在不使用 float 或者 position 的情况下轻松实现布局。二者主要的区别在于：

• 二维和一维的却别，Grid 可同时控制列和行，而 Flex 只能单独控制行或者列。
• Grid 适合整个页面布局，可以通过 Grid line 灵活调整每个元素在行列的占比。
• Flex 适合局部的布局，可以很方便的让元素对齐居中。

Reference

What’s the Difference Between Flexbox and Grid?

[zlx362211854]

grid布局适合x，y两条坐标轴的布局，flex适合单轴布局，如单x方向或者y方向。

• grid
• flex

[nanslee]

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

• flex 大家应该都用的比较熟，就不介绍了。
• grid 主要是通过 grid-template-columns 和 grid-template-rows 控制，他们的值可以控制列个数及列宽/行个数/行宽，如 grid-template-columns: 100px 100px 100px 代表有 3 列，每列均为 100px；同时有 repeat()，minmax()，fr 等关键字，感兴趣可以下来了解。

Reference

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