如何定位css网格中的最后一列？ [英] How to target the last column in a CSS grid?

问题描述

使用grid-areas时，元素可能会更改顺序。这将导致视觉:last-child改变。是否有针对网格中最后一列的css选择器？类似于:last-grid-column。

我正在努力解决的问题。我喜欢用边界线把柱子分开。但是，我不希望最后一栏有边框，因为这在视觉上没有意义。现在，如果我以:last-child为目标，它将一直起作用，直到我将grid-template-areas的顺序更改为类似于d b c a的顺序。现在第一列没有边框，因为在DOM中它仍然是最后一个子列。

我知道您可以在显式地指定这些区域为网格区域的情况下解决此问题，在本例中，我将省略a的边界。但如果我能从语义上描述它，那么它就会灵活得多，然后我就可以自由地更改模板区域，而不必担心边界线会被弄乱。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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，但我们还远远没有很好的支持。您可以阅读：

为了能够表示这种隐含的基于列的关系，定义了列组合符以及：nth-ol()和：nth-last-ol()伪类

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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网格中的最后一列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！