CSS3 grid 流式布局

前言#

正文#

只需要这样就可以实现流失布局：

//html

<div class="container">
  <div>item</div>
  ......
</div>


// css 样式
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fill 和auto-fit 的区别#

在 CSS 中，auto-fit 和 auto-fill 是用于自动填充网格或弹性布局容器中的项目的关键字。它们有一些相似之处，但也存在一些区别。

auto-fill：

• 当容器中有多余空间时，会填充多余的项目。
• 如果项目的大小超过容器的可用空间，项目可能会被压缩或溢出。
• 当项目被隐藏或移除时，容器中仍然保留空的单元格。
• 可以使用 grid-template-columns 或 grid-template-rows 配合 auto-fill 关键字来自动填充列或行。

auto-fit：

• 当容器中有多余空间时，会填充多余的项目。
• 如果项目的大小超过容器的可用空间，项目会自动缩小以适应容器。
• 当项目被隐藏或移除时，容器会自动调整其布局，没有空的单元格。
• 可以使用 grid-template-columns 或 grid-template-rows 配合 auto-fit 关键字来自动填充列或行。

区别：

• 主要区别在于当项目的大小超过容器可用空间时的处理方式。auto-fill 会继续填充项目，而 auto-fit 会自动调整项目的大小以适应容器。
• auto-fill 可能会导致项目溢出或压缩，而 auto-fit 会自动调整项目大小，以避免溢出或压缩。

选择使用 auto-fill 还是 auto-fit 取决于你的需求。如果你想要保持项目的原始大小，并且容器中可能会有空的单元格，那么可以选择 auto-fill。如果你希望项目自适应容器，并且不会有空的单元格，那么可以选择 auto-fit。

后记#

如果想使用 tailwindcss 实现grid 流式布局，看这里：https://github.com/tailwindlabs/tailwindcss/discussions/5541