没有媒体查询如何实现 3 列桌面到 1 列移动布局

Question

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

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

这很容易。grid-template-columns: repeat(3, 33%)（基本上）

然而，在移动设备上，我想要这个

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

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

我知道这不起作用，但作为请求的起点，这是我 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>

Answer 1

^{具有更通用规则的完整文章：https ://css-tricks.com/responsive-layouts-fewer-media-queries/}

这是一个使用内部 flex-basis 的想法max(0px, (400px - 100vw)*1000)。0px如果100vw（屏幕尺寸）大于或非常大的值，则该公式将给出400px，反之则给出每个元素较大的值flex-basis并创建环绕。只需调整一下400px所起到的作用@media (max-width:400px)

.container {
  display:flex;
  flex-wrap:wrap;
}

.container div {
  height:100px;
  border:2px solid;
  background:red;
  flex-basis:max(0px, (400px - 100vw)*1000);
  flex-grow:1;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

使用 CSS 网格，它可以如下所示：

.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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

一个类似的问题，我控制没有媒体查询的最大列数：CSS grid - 没有媒体查询的最大列数

我们可以扩展上述解决方案以考虑更复杂的情况。

从 6 列移动到 3 列到 1 列的示例：

.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;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

要了解这些值，请考虑以下范围：

100%/7  100%/6  100%/5  100%/4  100%/3  100%/2  100%/1
 14.3%  16.7%    20%     25%     33.3%   50%     100%

要获得 6 列，我们需要一个范围内的值]14.3% 16.7%]（我考虑过15%） 要获得 3 列，我们需要一个范围内的值]25% 33.3%]（我考虑过30%）

我们只是避免边缘以确保我们考虑到间隙。

一个使用 CSS 变量的更通用的解决方案，我将添加其中0.1%以确保该值足够大以获得所需的列数并且可以容纳间隙。

我们还添加一些动态着色（相关：如何根据其高度或宽度更改 <div> 元素的颜色？）

100%/7  100%/6  100%/5  100%/4  100%/3  100%/2  100%/1
 14.3%  16.7%    20%     25%     33.3%   50%     100%

.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;
}

使用 Flexbox，我们可以有不同的（可能是想要的）行为，其中一行的最后一项将占用所有可用空间：

<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;
}