1. 首页 > 快讯

如何使用 css grid 实现自适应行元素数量和高度的布局(css盒子自适应宽高)

怎样实现 css grid 自适应行元素数量和高度的布局?

问题:

  • 如何使用 css grid 实现一个自适应行元素数量和高度的布局,类似于自动填充列数和自动列宽的布局,但适用于行元素?

解答:

目前似乎无法直接使用 css grid 实现这样的布局。由于您没有提供具体的需求,可以考虑使用以下方式:

使用 flex 布局:

立即学习“前端免费学习笔记(深入)”;

  • 设置容器的高度为视窗的 50%,溢出处理为水平滚动。
  • 设置子元素为 flex 项目,并设置高度为自动,使其根据容器高度自适应。
  • 使用 flex-wrap 属性允许子元素换行,实现自适应行元素数量。

示例代码:

.container {
  height: 50vh;
  overflow-x: scroll;
}

.item {
  flex: 1 0 auto;
  height: auto;
}
登录后复制

如果您需要满足更具体的需求,请联系我们提供更详细的信息。

本文采摘于网络,不代表本站立场,转载联系作者并注明出处:https://www.iotsj.com//kuaixun/6714.html

联系我们

在线咨询:点击这里给我发消息

微信号:666666