grid使用技巧
auto-fill 自动填充
- grid-template-columns: repeat(auto-fill, 250px);
- 单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充
- auto-fill 即由浏览器动态决定列数，但是列宽是由用户自定义的
自动多列填充（多列响应式布局）
- 实现：grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
- auto-fill 动态决定列数，minmax()函数动态决定列宽
- minmax() 给定一个宽度范围，浏览器会根据动态在其中选择一个值
- 实现的效果：（1）容器宽度被填满；（2）子元素的宽度是动态变化的，但保证不会小于最小值；（3）列数也是动态变化的
- 建议：子元素不要设置宽度，让其跟随网格宽度一起变化
- 提示：缩放浏览器窗口，看看会有什么变化