加载中...

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

posted @ 2024-01-19 15:51  水车  阅读(65)  评论(0编辑  收藏  举报