css_01_自适应grid布局

网格布局根据宽度自动分配列数和列宽

主要是在设置 grid-template-columns 时设置repeat的第一个参数是 auto-fill或auto-fit第二个参数使用minmax和min进行配合让宽度使用最小值
注：希望grid中单元格宽度固定就使用 auto-fill；
使用auto-fit在列数按照给定宽度不足以占据第一行时会自动分配剩余宽度给已有列;

<div class="grid-auto-fill" style="height: 100%; padding: 10px; box-sizing: border-box;">
	<div class="card"></div>
</div>

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: .5rem;
}

效果

auto-fill

auto-fit