Grid网格布局常考面试题

Grid网格布局的好处不亚于Flex，可以快速将布局有规格的划分为想要的模块，和flex的开启方法一样，一句 display：grid便可启动

这里直接送上讲解传送门，可以去看阮一峰老师的博客，不仅Flex弹性布局写的很好，Grid网格布局也很Nice

CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

今天来和大家分享几道关于Grid常考的高频面试题

1 Grid如何实现类似 flex：row-reverse的效果

通过grid-auto-flow和direction

grid-auto-flow：row|column|dense 该属性指定采用 grid 布局的容器内部的元素如何排序

direction：rt|Irt 指定文本 表列的水平方向

2.盒子三等分

1.Grid

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr（fr=fraction）;
  gap: 1rem;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MthSqgDx-1657715104306)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8612c42a8a024db884b28f9dcf36197a~tplv-k3u1fbpfcp-watermark.image?)]

根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

2.flex

.flex-container {
  display: flex;
  flex-wrap: wrap;
  // gap: 1rem;
​
  .item {
    flex: 0 0 calc(100% / 3);
  }
}

3.Grid的优势

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 Grid 布局远比 Flex 布局强大

参考来自山月的博客，真的是面试好帮手
【Q506】Grid 布局如何实现类似 flex: row-reverse | css高频面试题 | 大厂面试题每日一题 (shanyue.tech)
转载：欢迎转载，但未经作者同意，必须保留此段声明；

有问题可以在评论区踢我