css 在网格中整齐对齐项目

1wnzp6jl 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(150)

我有一些div .test和grid-template-columns: auto auto auto;，因为我希望列宽像flex效果，这取决于元素的宽度，还有justify-content: start;向左对齐列，这也是为什么我使用auto而不是1fr，因为我不希望列被拉伸到更长的宽度。
问题是，我不知道如何像表格一样整齐地对齐列，从下面的例子中可以看出，第二个div .test中的p .target比第一个长，我试图实现的是使所有其他列宽度跟随最长的一个。
PS：我不想用table。我还可以使用JavaScript找到最长的一个，并将所有其他的宽度设置为这个。我只是想看看是否有一个简单的解决方案与CSS只。

p {
  margin: 0;
}

.test {
    column-gap: 30px;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
}

p:nth-child(2) {
    position: relative;
    width: 120px;
}

.flex {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>
<div class="test">
    <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

例如，它在表中看起来像这样：

td:nth-child(2) {
    position: relative;
  width: 120px;
}

.flex {
  white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

<table>
<tbody>
  <tr>
    <td>Hello</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hellooo</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
</tbody>
</table>

请注意，所有第二列一起开始，即使第一列“hellooo”从第二行开始更长。

css

来源：https://stackoverflow.com/questions/76410875/align-items-neatly-in-grid

2条答案

按热度按时间

bejyjqdl1#

重构你的HTML，以便在一个网格中添加所有项目，并使用inline-grid：

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

.test {
  display: inline-grid;
}

请注意，您必须使用更复杂的nth-child来定位每行的第二个元素：

p:nth-child(3n + 2) {}

试试看：

.test {
  display: inline-grid;
}

p:nth-child(3n + 2) {
  position: relative;
  width: 120px;
}

/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

赞(0）回复(0）举报 2023-06-07

kcugc4gi2#

如果你想让网格列表现得像一个表格，你需要把你的项目放在一个网格容器中，而不是两个单独的容器中：

<div class="test">
    <p class="target">Hello</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
    <p class="target">Hellooo</p>
    <p><span class="flex">Helloooooooooooooo</span></p>
    <p>Hello</p>
</div>

要设置每行第二个元素的宽度，您只需在网格布局中指定宽度：

grid-template-columns: auto 120px auto;

但是，如果我们现在去掉p:nth-child(2)选择器，我们将使.flex元素完全定位在网格上，而不是p元素，这会搞乱布局。
但实际上，您可以完全摆脱绝对定位，而不会弄乱布局，并将溢出属性应用于所有网格项，如下所示：

.test > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

下面是结果，更干净的代码：

p {
  margin: 0;
}

.test {
  column-gap: 30px;
  display: grid;
  grid-template-columns: auto 120px auto;
  justify-content: start;
}

.test > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

赞(0）回复(0）举报 2023-06-07

我来回答

css 在网格中整齐对齐项目

2条答案

相关问题

热门标签

最新问答