网格布局自适应（一）

需求

多个固定宽度的盒子横向排列，超过页面宽度自动换行。要求盒子间空隙自动计算，避免出现行末大幅空白现象。

分析

要求自适应，就不能给固定宽度的 margin；

针对不同屏幕宽度，每行的盒子数量也不同；

因此，需要用到 repeat() 使得列宽自适应。比如：

.grid {
   display: grid;

  /* 指定网格列数：分为12个盒子 */
  grid-template-columns: repeat(12, 1fr);
}

但是如果屏幕宽度变小，分成12个盒子，就会导致盒子宽度被挤压。因此需要使用 minmax() 保证盒子的最小宽度。

grid-template-columns: repeat( 12, minmax(250px, 1fr) );

如果屏幕宽度小于 250px * 12，那么就会溢出，无法实现自动换行。因此要用到 auto-fit 或 auto-fill。

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

解决

给父盒子添加以下代码：

  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

参考链接

1. 菜鸟教程_css网格布局
2. [译] CSS Grid 之列宽自适应：auto-fill vs auto-fit