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
作者:水车
出处:https://www.cnblogs.com/shuiche/p/17974831
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
推荐一个激活软件下载站:mac.shuiche.cc
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现