如何防止网格行跨度更改列位置？ [英] How to prevent grid-row span from changing column placement?

问题描述

我有一个3 X 3

I have a 3 X 3 CSS Grid.

I have a row in which I have three items A, B & C.

I want item C to have a rowspan of 2.

To do so, I am using grid-row: 1 / span 2;. It is taking two rows, but it's being placed in the first column instead of simply lying in the 3rd column. I don't know why this is happening.

I want item C to stay at the place where it is in the HTML.

One work around to this problem is to explicitly setting grid-column: 3 / span 1 which I don't want to do. I want items to be placed the way they are in HTML.

Is there any way to suppress this behavior?

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}

<div class="grid-container">
  <div>
    <h1>A</h1>
  </div>
  <div>
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

解决方案

Another way of solving it (That points to the reason why is stating a row for the other items):

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

h1 {
  border: 2px solid;
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.a {
  grid-row: 1 / span 2;
  background: orange;
}

.b {
  grid-row: 1;
}

<div class="grid-container">
  <div class="b">
    <h1>A</h1>
  </div>
  <div class="b">
    <h1>B</h1>
  </div>
  <div class="a">
    <h1>C</h1>
  </div>
</div>

And the reason of this behaviour is that the more restrictive elements get positioned first. This way, the possibilities of the grid algorithm to achieve a solution are bigger.

That is, an element that has a requirement will be positioned first, elements that don't have a requirement last.

Steps 2 (for a item) and 4 (for the remaining items) in this part of the spec

这篇关于如何防止网格行跨度更改列位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！