Html Css网格：两列，除非小于150px

.cont {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
 }
.box {background-color: grey;}

<div class="cont">
<div class="box">one</div>
<div class="box">two</div>
<div class="box">three</div>
<div class="box">four</div>
</div>

.cont {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.box {
  background-color: grey;
  flex: 1 0 calc(50% - 10px);
  min-width: 150px;
}

<div class="cont">
  <div class="box">one</div>
  <div class="box">two</div>
  <div class="box">three</div>
  <div class="box">four</div>
</div>

Html相关问答推荐

输入表单在奇怪的地方舍入的标签

如何在div中淡入和淡出渐变背景？

通过动态div的对角线

Div内容防止同级大小增加

创建带有弯曲边框的水平时间线

单独处理Button：Focus的多行按钮

你将如何为手机制作导航栏

元素在向x提供溢出时被隐藏

在R中从网页上的特定iframe中提取图形数据

为什么 html 元素的 max-width 和 width 一起工作？

在Angular中，类型"HTMLDivElement"不能分配给类型"Node"

表单中如何分别禁用/启用多个提交按钮？

在 vscode 中找不到 htmltagwrap 命令

是否可以为长 huxtable 固定头部？

如何使用 CSS 使粘性元素固定在视口顶部

如何将某些 div 的高度限制为具有 display flex 行的同一父 div 中的其他 div？

如何使我的下拉菜单响应？

为什么将 p 元素的垂直边距设置为 1 px 会出现滚动条？

两个按钮范围滑块的 CSS

是否有一种静态方式可以根据暗模式 Select 一张或另一张图像？