css - 如何定位 CSS 网格中的最后一列？

<分区>

当您使用 grid-areas 时，元素的顺序可能会改变。这将导致视觉 :last-child 发生变化。是否有 CSS 选择器来定位网格中的最后一列？类似于 :last-grid-column。

我要解决的问题。我喜欢用边框线分隔列。但是我不希望最后一列有边框，因为那样在视觉上没有意义。现在，如果我用 :last-child 定位它，它会一直工作，直到我将 grid-template-areas 的顺序更改为 d b c a。现在第一列没有边框，因为在 DOM 中它仍然是最后一个子列。

我知道你可以解决你明确说这些是网格区域的问题，在这种情况下我会省略 a 的边框。但是如果我能用语义来描述它会更加灵活，然后我可以自由地改变模板区域而不用担心边界线会被弄乱。

.grid 
{
  display: grid;
  grid-template-areas: "d b c a";
  grid-template-columns: repeat( 4, 1fr );
}

.column.a { 
  grid-area: a; 
}

.column.b { 
  grid-area: b; 
}

.column.c { 
  grid-area: c; 
}

.column.d { 
  grid-area: d; 
}

.column:not(:last-child) {
  border-right: 1px solid black;
}

/* Flavor */
.grid 
{
  margin: 20px auto;
  max-width: 600px;
  padding: 20px;
  background: #F4F4F4;
}

.column { 
  width: 100%; 
  text-align: center;
}

<div class="grid">
  <div class="column a">A</div>
  <div class="column b">B</div>
  <div class="column c">C</div>
  <div class="column d">D</div>
</div>

最佳答案

这样selector exist但我们还远远没有得到很好的支持。您可以阅读:

To be able to represent such implied column-based relationships, the column combinator and the :nth-col() and :nth-last-col() pseudo-classes are defined

对于您的特定情况，背景可以完成这项工作:

.grid 
{
  display: grid;
  grid-template-areas: "d b c a";
  grid-template-columns: repeat( 4, 1fr );
  background:
    linear-gradient(90deg,#0000 calc(100% - 1px), #000 0)
    0 50%/calc((100% + 1px)/4) 50% repeat-x
    #F4F4F4;
}

.column.a { 
  grid-area: a; 
}

.column.b { 
  grid-area: b; 
}

.column.c { 
  grid-area: c; 
}

.column.d { 
  grid-area: d; 
}


/* Flavor */
.grid 
{
  margin: 20px auto;
  max-width: 600px;
  padding: 20px;
}

.column { 
  width: 100%; 
  text-align: center;
}

<div class="grid">
  <div class="column a">A</div>
  <div class="column b">B</div>
  <div class="column c">C</div>
  <div class="column d">D</div>
</div>

关于css - 如何定位 CSS 网格中的最后一列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68755484/

上一篇：python - 打字机-cli : How to use custom data type with typer

下一篇：python - Pandas :创建列，其中包含同一 ID/组内另一列的前 n 行的滚动总和

相关文章：

html - 网格模板列未按预期工作

CSS 网格元素重叠

html - GRID 元素右对齐

asp.net - IE 不环绕 float div 但 FF 是

javascript - 具有适合动态宽度和高度元素的网格/Flexbox 布局

html - 为什么我的网格元素没有跨越多行？

css - 选择 h 之后所有第一次出现的 p

javascript - JQuery 在多个插件后改变宽度

css - Deviant Art 如何让他们的动态图像在 IE6 上垂直居中？

css - 水平和垂直居中div