Grid 布局


# Grid 布局

# 待定项

Grid 网格布局虽然强大,但由于其兼容性比 Flex 更差一点,目前并未得到全面应用。这主要取决于现代化浏览器的普及率(有些单位还是会更多地使用 IE)。

但作为一种全新的布局方式,随着现代化浏览器的逐渐普及,再加上不可能总是做面向 IE 客户的产品,Grid 网格布局未来也许会是一种趋势。

因此这一章节先放两篇比较好的Grid 网格布局文章,等以后用到了再系统整理。

# 应用场景

grid 和 flex 各自的应用场景:

  • 考虑是一维布局还是二维布局
    • 一维:横着/竖着的布局
    • 二维:有横有竖的布局
    • 一般来说,一维布局用 flex,二维布局用 grid
  • 考虑是从内容出发还是从布局出发
    • 从内容出发:先有一组内容(数量一般不固定),然后希望他们均匀地分布在容器中,由内容自己的大小决定占据的空间
    • 从布局出发:先规划网格(数量一般比较固定,比如三行三列),然后再把元素往里填充
    • 从内容出发用 flex
    • 从布局出发用 grid