相关疑难解决方法(0)

如何在使用时指定最大列数,当display: grid;内容对于空间来说太宽(或小于最小大小)时它会自动断开？有没有办法在没有媒体查询的情况下做到这一点？

例如,我有以下内容,当内容空间不足时,不会分成单列模式.

#grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
}

#grid > div {
  background-color: #ccddaa;
}

<div id="grid">
  <div>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text …

有没有办法在不使用媒体查询的情况下限制创建的列数,并将其与自动调整/填充相结合？

例如:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

创建精彩,响应迅速的布局.但想象一下,设计最多需要3列 - 即使在广泛的浏览器中也是如此.如果空间允许,它会愉快地显示4,5个更多列.

使用媒体查询,我可以指定大屏幕获取:

grid-template-columns: 1fr 1fr 1fr;

小屏幕得到:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

但这感觉不对.有没有办法告诉我的网格布局重复最多n次,仍然使用重复和自动适合/填充？

更新:这不是重复:如何使用CSS网格和自动填充/拟合限制较大视口中的列数？

我问如何使视口的代码也适用于较小的视口.上面提到的问题(和答案)只是我的问题的起点.

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.a-fc {
  background-color: purple;
  width: 300px;
  /*height: 100px;*/
}

.b-fc {
    background-color: orange;
    display: flex;
    flex-direction: column;
    /*flex-wrap: wrap;*/
    flex-basis:70px;
    flex-grow:1;
}

.b-fc > * {
  flex-grow: 1;
  flex-basis: 100px;
}

.b-fc > *:nth-child(1) {
  background-color: red;
}

.b-fc > *:nth-child(2) {
  background-color: blue;
}

.b-fc > *:nth-child(3) {
  background-color: green;
}

<div class="wrapper">
  <div class="a-fc">
   <div>a1</div>
  </div>
  <div class="b-fc">
  <div>b1</div><div>b2</div><div>b3</div>
  </div>
</div>

FC = 弹性容器。FI = …

我开始使用 CSS Grid，我一直在阅读有关有助于响应的属性；所以我正在尝试构建一个包含 6 个元素的小网格；我的目的是让它们在较大的设备上显示为 2 行，如下所示：

并且为了将它们全部显示在较小的设备上，所以对于较小的设备来说一切都很好，我正在使用auto-fill它以保持响应，但是如果我在笔记本电脑屏幕或台式机上查看页面，它能够再填充一列最终看起来像这样：

这是我的grid布局代码。

display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;

有没有办法保持响应行为但也设置最大列数？任何帮助表示赞赏；如果它只能通过媒体查询来完成，那很好，但我首先尝试寻找不使用它们的方法。此外，我通过padding为整个网格容器设置水平以补偿附加列的大小，使其按预期工作；但同样，如果有更好的方法，我会全神贯注。谢谢！

工作示例 https://codepen.io/IvanS95/pen/NEYdxb

突出强调了Flexbox用于1-D，而Grid用于2-D，但是我还没有找到清楚的解释，为什么不能将Grid用于1-D并替代Flexbox。在我来到最接近的就是

但是您也可能会争辩说，像这样的纯一维布局在Flexbox中更强大，因为Flexbox允许我们更轻松地移动这些元素（例如，将它们全部移动到一侧或另一侧，更改其顺序，将它们均匀地隔开等）。

我将Grid和Flexbox用于基本布局：框在页面上的一般放置以及一些动态的（通常是堆叠的）。美观的（烤面包机，模式，...）通过框架进行管理。我还没有发现Grid无法立即替换Flexbox的情况（即没有高级CSS 技巧或很多代码）。

以上面的引用为例，提到的所有“动作”都可以在Grid中直接使用，通常具有与Flexbox相同的语义。

Flexbox涵盖哪些难以或无法通过Grid管理的基本领域？

编辑：浏览器支持并不重要（我只使用常绿的浏览器，如果需要可以切换）

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

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

这很容易。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>