CSS Grid 隐藏不适合的元素

Question

我正在尝试创建纯 CSS 响应式导航。这意味着没有媒体查询、没有像素值和没有 JS。

第一个挑战是在水平空间不足的情况下隐藏导航。我能够做到这一点，但代价是给它一个像素值。

.wrapper {
  background: rgba(0, 255, 0, 0.1);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 250px));
  justify-content: space-between;
  grid-template-rows: auto;
  grid-auto-rows: 0;
  /* Automatically created rows will have a height of 0. */
  overflow: hidden;
  border: 1px solid red;
}

.logo {
  background: rgba(255, 0, 0, 0.1);
}

.another-element {
  background: rgba(0, 0, 255, 0.1);
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow: hidden;
}

a {
  white-space: nowrap;
  background: orange;
}

<div class="wrapper">
  <div class="logo">Logo</div>
  <div class="another-element">
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
    <a>Link 4</a>
  </div>
</div>

我研究了 repeat() function .一些注意事项:

• 只能通过将 repeat() 函数与 auto-fill 或 auto-fit 结合使用来创建自动行。
• 可以使用 grid-auto-rows: 0; 折叠自动行，从而隐藏不适合第一行的元素。
• 当使用带自动调整功能的 repeat() 作为第一个参数时，可以使用 minmax() 作为第二个参数。 minmax() 函数允许我们为列设置最小值和最大值，但是 it requires a pair of length/percentage and min-content, max-content or auto ，但不接受两个参数的最小内容:minmax(min-content, min-content) 似乎不是有效的 CSS。

所以一切都按预期工作，除了换行发生在固定的 250px*2 值而不是当没有足够的空间容纳两个元素时。知道如何让换行仅在空间不足时发生吗？

这是一个 codepen .

Answer 1

我已经玩了很多年了，我无法改进你的网格解决方案。

我认为我将在我的元素中做的是使用具有固定高度容器/包装器的 flexbox。这可能适合也可能不适合您的用例。

.container {
  border: 1px solid black;
  height: 2em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: 1em;
  overflow: hidden;
}
.box {
  box-sizing: border-box;
  height: 100%;
  background: cyan;
  padding-left: 5px;
}

<div class="container">
  <div class="box">the quick</div>
  <div class="box">the quick brown</div>
  <div class="box">the quick brown fox</div>
  <div class="box">the quick brown fox jumps</div>
  <div class="box">the quick brown fox jumps over</div>
  <div class="box">the quick brown fox jumps over the lazy dog</div>
</div>