grid-row-start/grid-row-end 将项目放入了错误的列中。

huangapple go评论65阅读模式
英文:

grid-row-start/grid-row-end puts item in wrong column

问题

为什么下面的 grid-row-start/grid-row-end 代码会将项目 #2 放在第1列?没有提到列。意图是项目 #2 应该保留在第2列,但占用两行。如果我尝试在项目 #1 上使用这段代码,它可以正常工作:它占用了两行并保留在自己的列中,但项目 #2 不行。项目 #2 被移到了前面,即第1列。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.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;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

注意:这是原始代码的翻译,不包括代码部分。

英文:

Why is it that the below grid-row-start/grid-row-end code puts Item #2 in the 1st column? Nothing was said about columns. The intent is that Item #2 should remain in its 2nd column but take up two rows. The code works if I try this with Item #1: it takes up two rows and remains in its own column, but not Item #2. Item #2 is moved to the front, the 1st column.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

	&lt;div class=&quot;container container-grid-example&quot;&gt;
		&lt;div class=&quot;item-grid&quot;&gt;1&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;2&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;3&lt;/div&gt;  
		&lt;div class=&quot;item-grid&quot;&gt;4&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;5&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;6&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;7&lt;/div&gt;
		&lt;div class=&quot;item-grid&quot;&gt;8&lt;/div&gt;  
	&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 2

修复方法是使用 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%;
}

/* 这里使用 :nth-child(1),即第一个项目 */
.container-grid-example :nth-child(2) {
  grid-row: span 2;
}

理解发生的情况,您需要参考放置算法,了解每个元素何时放置:https://www.w3.org/TR/css-grid-1/#auto-placement-algo

您会注意到以下步骤:

  1. 定位所有不是自动定位的内容。

  2. 处理锁定到给定行的项目。

  3. 确定隐式网格中的列。

  4. 定位剩余的网格项目。

在您的情况下,无需考虑步骤 (3),因为您没有任何隐式网格。我们也没有 "不是自动定位的项目",因此我们将考虑步骤 (2) 和步骤 (4)。

在您的示例中,第二个项目锁定到给定的行,因此它属于步骤 (2),因此我们首先定位它,然后考虑步骤 (4) 中的剩余项目。

当使用 span 2 时,元素不再锁定到给定行,因此它属于步骤 (4),就像所有项目一样,我们按文档顺序放置它们,因此逻辑上从第一个开始,然后是第二个,依此类推。

英文:

The fix is to use span 2 and not define the lines.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-css -->

.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;
}

<!-- language: lang-html -->

&lt;div class=&quot;container container-grid-example&quot;&gt;
  &lt;div class=&quot;item-grid&quot;&gt;1&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;2&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;3&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;4&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;5&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;6&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;7&lt;/div&gt;
  &lt;div class=&quot;item-grid&quot;&gt;8&lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

To understand what's happening, you need to refer to the placement algorithm to know when each element is placed: https://www.w3.org/TR/css-grid-1/#auto-placement-algo

You will notice the steps like below:

> 1. Position anything that’s not auto-positioned.
>
> 2. Process the items locked to a given row.
>
> 3. Determine the columns in the implicit grid.
>
> 4. Position the remaining grid items.

In your case, no need to consider (3) because you don't have any implicit grid. We also don't have items "not auto-positioned" so we will consider the (2) and the (4).

In your example, the second item is locked to a given row so it belongs to the step (2) thus we first position it then we consider the remaining items in steps (4).

When using span 2, the element is no more locked to a given row so it belongs to the step (4) like all the items and we follow the document order to place all of them so we logically start with the first one then the second one and so on.


Some related questions:

https://stackoverflow.com/q/64198236/8620333

https://stackoverflow.com/q/68595914/8620333

https://stackoverflow.com/q/64746869/8620333

huangapple
  • 本文由 发表于 2023年6月25日 22:25:40
  • 转载请务必保留本文链接:https://go.coder-hub.com/76550878.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定