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

Question

在这里研究了一些问题，但他们并没有完全解决我想要的东西。

说我有一个网站，我想要。在桌面上我想要：

这很容易。 网格 - 板块 - 列：重复（3，33％）（基本上）

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

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

我正在尝试clamp（），minmax（），以及各种各样的东西想。是的，我可以完全使用媒体查询，但是我希望使用夹具，网格，Minmax等现代CS创建真正的流体网格/Flex布局，因此不需要对基本布局更改进行媒体查询。

我知道这不起作用，但是作为要求的起点，这是我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：https：//// css-tricks.com/responsive-layouts-fewer-media-ceries/}

以下是一个想法，使用max（0px，（400px-100vw）*1000 -基础。如果100VW（屏幕大小）大于400px或相反的情况，则此公式将给出0px（屏幕大小）（屏幕大小）大于400px Big flex-basis并创建一个包装。只需调整400px扮演@Media（最大宽度：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％，以确保该值足够大以获得所需的列数，并且可以保持差距。

我们还添加一些动态的颜色（相关：如何根据其高度或宽度更改＆lt; div; div; div; div; >）

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

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

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

Answer 2

您可以通过这样的网格来实现这一点：

.btnContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* here you set when the width should change to be moved to the next row, in this example, the divs will move when the screen reduces size and their width is less than 200px */
}

.btnCenter3 {
  background-color: rgb(6, 198, 247);
  height: 400px;
}
.btnCenter4 {
  height: 400px;
  background-color: rgb(196, 95, 1);
}
.btnCenter5 {
  height: 400px;
  background-color: rgb(192, 231, 19);
}

<div class="btnContainer">
<div class="btnCenter3"></div>
      <div class="btnCenter4"></div>
      <div class="btnCenter5"></div>
 </div>

Answer 3

@Temani的答案是傻瓜，但很棒:)。我需要为4列布局实施类似的东西（分解2个Cols然后是1个Col），但发现替换25和50的15个和30个百分比值不起作用。这似乎与以下事实有关，即需要考虑网格差距的百分比，因此 @temani的答案仅是因为“错误”而真正起作用。因此，基于4个Col网格的更强大的（甚至更多的刺激性）解决方案是：

:root {
  --grid-gap: 10px;
  --grid-gap-x2: calc(var(--grid-gap));
}

.container {
  display:grid;
  grid-gap: var(--grid-gap-x2);
  grid-template-columns:
    repeat(auto-fill, minmax(clamp(clamp(calc(25% - var(--grid-gap-x2)),(800px - 100vw)*1000, calc(50% - var(--grid-gap-x2))), (400px - 100vw)*1000, 100%)
      /* if(screen> 800px) 25% elseif(screen> 400px) 50% else 100%. */
      /* (Subtracting grid gap from either side of percentage width.) */
      ,1fr));
}