css grid-row-start/grid-row-end将项目放入错误的列

xlpyo6sf 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(133)

为什么下面的grid-row-start/grid-row-end代码将Item #2放在第一列？没有提到柱子。目的是项目#2应保留在其第2列中，但占据两行。如果我尝试使用Item #1，代码就可以工作：它占据两行并保留在自己的列中，但不是项目#2。项目#2移动到前面，第1列。

.container {
    border: 1px dashed red;
}

.item-grid {
    background-color: rgba(255, 0, 200, .2);
    border: 1px solid green;
    padding: 1rem;
}

.container-grid-example {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    width: 50%;
}

/* This works with :nth-child(1), the 1st item */
.container-grid-example :nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 3;
}

<div class="container container-grid-example">
        <div class="item-grid">1</div>
        <div class="item-grid">2</div>
        <div class="item-grid">3</div>  
        <div class="item-grid">4</div>
        <div class="item-grid">5</div>
        <div class="item-grid">6</div>
        <div class="item-grid">7</div>
        <div class="item-grid">8</div>  
    </div>

css

来源：https://stackoverflow.com/questions/76550878/grid-row-start-grid-row-end-puts-item-in-wrong-column

1条答案

按热度按时间

nkcskrwz1#

修复方法是使用span 2而不定义行。

.container {
  border: 1px dashed red;
}

.item-grid {
  background-color: rgba(255, 0, 200, .2);
  border: 1px solid green;
  padding: 1rem;
}

.container-grid-example {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  width: 50%;
}

/* This works with :nth-child(1), the 1st item */
.container-grid-example :nth-child(2) {
  grid-row: span 2;
}

<div class="container container-grid-example">
  <div class="item-grid">1</div>
  <div class="item-grid">2</div>
  <div class="item-grid">3</div>
  <div class="item-grid">4</div>
  <div class="item-grid">5</div>
  <div class="item-grid">6</div>
  <div class="item-grid">7</div>
  <div class="item-grid">8</div>
</div>

要了解发生了什么，您需要参考放置算法以了解每个元素的放置时间：https://www.w3.org/TR/css-grid-1/#auto-placement-algo
你会注意到下面的步骤：
1.定位任何未自动定位的内容。
1.处理锁定到给定行的项。
1.确定隐式网格中的列。
1.定位其余网格项。
在你的例子中，不需要考虑（3），因为你没有任何隐式网格。我们也没有“非自动定位”的项目，因此我们将考虑（2）和（4）。
在您的示例中，第二个项目被锁定到给定的行，因此它属于步骤（2），因此我们首先定位它，然后在步骤（4）中考虑剩余的项目。
当使用span 2时，元素不再被锁定到给定的行，因此它像所有项目一样属于步骤（4），我们遵循文档顺序放置所有项目，因此我们逻辑上从第一个开始，然后是第二个，依此类推。
一些相关问题：
CSS Grid : How Auto placement algorithm works
CSS Grid Item Placement
Using CSS GRID Why Im getting this gap?

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

我来回答

css grid-row-start/grid-row-end将项目放入错误的列

1条答案

相关问题

热门标签

最新问答