时间戳

首页 > 解决方案 > CSS Grid：在特定 x 位置开始列

css - CSS Grid：在特定 x 位置开始列

问题描述

我正在尝试实现具有三列的 CSS 网格布局：A 列和 B 列始终等于某个宽度，以使 C 列从同一位置开始，除非 A 和/或 B 中的内容变得太宽。

或者用另一种方式来描述它：如果 A 变大，则从 B 中取出所需的额外宽度，而不是将 B 和 C 都向右移动。

或者，可以将 A 和 B 放在同一列中但内联显示吗？

我知道这可以通过将 A 和 B 包装在另一个容器元素中来实现，但是可以仅使用 CSS 网格来完成吗？

|<--A-->|<---B--->|<-------C------->|

where:
A + B + C = 100%
A + B = min(30em)
A = min(18em)

标签： csscss-grid

解决方案

您可以考虑在 A 和 B 列上放置一个额外的隐藏元素并min-width在其上定义 a 来执行此操作。这有点棘手，但想法是两列的宽度都将服从 A 和 B 以及隐藏元素的约束。

这里有一个例子来说明这个技巧。我被替换30em为200px18em50px

.container {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-rows:1fr 0;
  height: 30px;
  color:#fff;
  margin:5px;
}

.A {
  background: red;
  min-width:50px;
}

.B {
  background:blue;
}

.C {
  background:green;
}
.container::after {
  content: "";
  grid-column: span 2;
  min-width: 200px;
}
<div class="container">
  <div class="A"></div>
  <div class="B"></div>
  <div class="C">text here</div>
</div>

<div class="container">
  <div class="A">some text</div>
  <div class="B"></div>
  <div class="C">text here</div>
</div>

<div class="container">
  <div class="A"></div>
  <div class="B">some text</div>
  <div class="C">text here</div>
</div>

<div class="container">
  <div class="A">some text</div>
  <div class="B">some text</div>
  <div class="C">text here</div>
</div>

<div class="container">
  <div class="A"></div>
  <div class="B">more and more and more text here</div>
  <div class="C">text here</div>
</div>

<div class="container">
  <div class="A">more and more  text here</div>
  <div class="B">more and more  text here</div>
  <div class="C">text here</div>
</div>

唯一的缺点或可能是一个简单的观察是 A 和 B 的宽度将取决于两者的内容，并且在 A 上应用的 min-width 将使其在两者都为空的情况下增长得更多。

推荐阅读