无需媒体查询即可实现 3 列桌面到 1 列移动布局-PHP中文网问答

这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。

假设我有一个网站并且我想要。在桌面上我想要这个：

这很容易。 grid-template-columns: 重复(3, 33%) (基本上)

但是，在移动设备上，我想要这个

我遇到的情况发生在它翻转到单个列之前：

我正在尝试 clamp()、minmax() 以及各种各样的东西，但没有任何东西能按我想要的方式工作。是的，我完全可以使用媒体查询，但我希望使用现代CSS（如clamp、grid、minmax等）创建真正流畅的网格/柔性布局，这样就不需要媒体查询来进行基本布局更改。< /p>

我知道这不起作用，但作为请求的起点，这是我 100 次尝试之一的简单版本:) 在这个版本中，我尝试使用钳位从重复（3）切换到重复（1））。

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="wrapper">
  <div class="item one"><h3>Example A</h3></div>
  <div class="item two"><h3>Example Two</h3></div>
  <div class="item three"><h3>Third Example</h3></div>
</div>

.container { display:grid; grid-template-columns:repeat(auto-fill,minmax(clamp(30%, (400px - 100vw)*1000, 100%),1fr)); grid-gap:5px; } .container div { height:100px; border:2px solid; background:red; }

.container { display:grid; grid-template-columns: repeat(auto-fill, minmax(clamp(clamp(15%,(800px - 100vw)*1000, 30%), (400px - 100vw)*1000, 100%) /* if(screen> 800px) 15% elseif(screen> 400px) 30% else 100% */ ,1fr)); grid-gap:5px; } .container div { height:100px; border:2px solid; background:red; }

.container { /* first breakpoint*/ --w1:800px; --n1:6; /* second breakpoint*/ --w2:400px; --n2:3; display:grid; grid-template-columns: repeat(auto-fill, minmax(clamp(clamp(100%/(var(--n1) + 1) + 0.1%, (var(--w1) - 100vw)*1000, 100%/(var(--n2) + 1) + 0.1%), (var(--w2) - 100vw)*1000, 100%), 1fr)); grid-gap:5px; margin:10px 0; } .container div { height:100px; border:2px solid; background: linear-gradient(blue 0 0) 0 /1% calc(var(--w2) - 100vw), linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw), red; }

<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;grid-gap:10px;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container" style="--w1:600px;--n1:4;--n2:2;grid-gap:2vw;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>

.container { /* first breakpoint*/ --w1:800px; --n1:6; /* second breakpoint*/ --w2:400px; --n2:3; display:flex; flex-wrap:wrap; margin:10px 0; } .container div { height:100px; border:2px solid; margin:5px; flex-basis:clamp(clamp(100%/(var(--n1) + 1) + 0.1% ,(var(--w1) - 100vw)*1000, 100%/(var(--n2) + 1) + 0.1%),(var(--w2) - 100vw)*1000, 100%); flex-grow:1; box-sizing:border-box; background: linear-gradient(blue 0 0) 0 /1% calc(var(--w2) - 100vw), linear-gradient(green 0 0) 0 /1% calc(var(--w1) - 100vw), red; }

<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container" style="--w1:900px;--n1:8;--w2:500px;--n2:4;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="container" style="--w1:600px;--n1:4;--n2:2;"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>