主页 / coding / 问题 / 79596950
Accepted
t.schoel
Asked: 2025-04-29 00:49:33 +0800 CST

在 CSS 网格中，是否可以让左右轨道完全相等、尺寸最小，并将剩余空间留给中间轨道？

  • 772

在一个包含三条轨道的网格行中，我希望左右轨道大小完全相等，同时保留两者中较大的 min-content 值，并且让中间轨道占据剩余空间，无论其内容大小如何。以下 HTML+CSS 代码演示了这个问题：

nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
<nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

grid-template-columns: 1fr auto 1fr;某种程度上很好地描述了我想要实现的目标，但却行不通。相反，正如其他人在其他地方提到的1fr那样minmax(auto, 1fr)，边缘轨道的宽度会减小到 0，而中间轨道会占据整个空间。类似于 的方法grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);虽然效果会稍微好一些，但也不是我想要的，因为它会将边缘减小到min-content，而每个边缘的宽度都不同，也就是说，它们的宽度不会相等。

css

3 个回答

  1. Best Answer

    简短回答：不，没有一些妥协就无法做到这一点。

    您的要求没有意义，您希望所有三列都填充“剩余空间”，这是无法计算的，因为您没有指定“占用空间”。

    基本上，您希望给出任何占用空间的感觉，以便浏览器可以计算出为其他空间提供多少空间。

    选项 1：限制中间部分的长度，并围绕该长度进行设计。两侧边缘将强制大小相同。

    nav {
  display: grid;
  grid-template-columns: 1fr minmax(auto, 80%) 1fr;
  /* grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr); */
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    选项 2：限制中间可以增长的距离并将边缘最小化到内容，只有当中间不需要空间时，边缘才会匹配大小，但所有内容始终可见。

    nav {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(auto, 80%) minmax(min-content, 1fr);
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    选项3：定义边缘的尺寸。中间部分将占用边缘未占用的剩余空间。

    nav {
  display: grid;
  grid-template-columns: 10rem auto 10rem;
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    选项 4：将所有内容放在 flex 参数上。相对大小将始终保持不变。

    nav {
  display: grid;
  grid-template-columns: 1fr 5fr 1fr;
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;

  li {
    padding: 8px 16px;
    white-space: nowrap;

    &:not(:last-child) {
      border-inline-end: 1px solid black;
    }
  }

}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;

}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">

    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>

  </div>
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    可能还有其他语法可以实现类似的结果，例如涉及 col-span 等，但这些基本上是您逻辑构建网格的选项。

    • 0

  2. 将左侧元素扩展到最大值，并使用 Javascript 获取左侧元素的宽度并添加到右侧元素。

    <style>
  /* rest of your code  ... */

    .right {
        justify-self: end;
        width: 100% !important;

    }

    .left {
        justify-self: start;
        min-width:min-content;
    }
</style>

    JavaScript 用于更改宽度。您可以修改并添加事件监听器来监听调整大小事件。

    <script>
    let right = document.getElementsByClassName('right')[0];
    let left = document.getElementsByClassName('left')[0];
    right.style.minWidth = left.offsetWidth + 'px';
</script>
    • 0

  3. 我认为仅使用 CSS 不可能做到这一点。

    但即使有，我也不会用那种设计。我不会试图让左右两侧的宽度相等。如果左右两侧的轨道都恰到好处地设置，看起来会更好——这样中心轨道和两个边缘轨道之间的间隙就会相等。只需使用带有 的弹性盒子即可justify-content: space-between。

    在此处输入图片描述

    在此处输入图片描述

    nav {
  margin-top: 3em;
  display: flex;
  justify-content: space-between;
  gap: 3vw;
  background: green;
  color: white;
  align-items: center;
  overflow: hidden;
  padding: 0.5em 1em;
  
  h3 {
    margin: 0;
  }

  ul {
    margin: 0;
    display: flex;
    border: 1px solid white;
    border-radius: 4px;
    list-style: none;
    padding: 0;
    overflow: auto;

    li {
      padding: 8px 16px;
      white-space: nowrap;

      &:not(:last-child) {
        border-inline-end: 1px solid white;
      }
    }
  }
  
  .edge {
    white-space: nowrap;
  }
}
    <nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <ul class="box centre links">
    <li>First Link Item</li>
    <li>Second Link Item</li>
    <li>Third Link Item</li>
    <li>Fourth Link Item</li>
    <li>Fifth Link Item</li>
    <li>Sixth Link Item</li>
    <li>Seventh Link Item</li>
    <li>Eighth Link Item</li>
    <li>Ninth Link Item</li>
    <li>Tenth Link Item</li>
  </ul>
  
  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

    • 0

相关问题