html - 让 grid-row 覆盖 grid-template-rows

Question

我问这个是为了我自己的教育，如果这是不好的做法，请随意说。

我想要元素#one #two #three并通过为每个元素设置单独的网格行设置来覆盖#four它们的父属性 。grid-template-rows: 100px 100px 100px 100px

当我像这样设置它们时，元素#one并#two按照我的预期响应：

#one{
     grid-row: 1/ span 4 ; 
}

#two{
     grid-row: 1/ span 4 ; 
}

但是，当我尝试应用类似的设置时#three，#four我没有得到我期望的结果。我希望 和 的高度与#three和#four完全相同。相反，它们飞到页面的一侧。#one#two

我希望这会显示类似于#one 和#two 的元素。它不起作用：

#three{
     grid-row: 2/ span 4 ; 
}


#four{
     grid-row: 2/ span 4 ; 
}

我想知道如何解决这个问题以及正确的单个值来设置#three和#four覆盖所描述的网格模板行。

代码：https ://jsfiddle.net/ek2r6a19/

* {
  font-family: Helvetica;
  font-size: 1em;
  color: white;
  text-align: center;
}

img {
  display: block;
  margin: 20px 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(141, 110, 99);
  max-width: 50%;
  height: auto;
}


/*_____________________________GRID */

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px 100px 100px 100px 100px;
  grid-gap: 10px;
}

.container div:nth-child(even) {
  background-color: orange;
}

.container div:nth-child(odd) {
  background-color: purple;
}

#one {
  grid-row: 1/ span 4;
}

#two {
  grid-row: 1/ span 4;
}


/*

I expected this to display the elements similar to #one and #two. It doesn't work
#three{
     grid-row: 2/ span 4 ; 
}


#four{
     grid-row: 2/ span 4 ; 
}

*/

<div class="container">
  <div id="one">1
    <div class="content-container">

    </div>
  </div>
  <div id="two">
    2
    <div class="content-container">
      text
    </div>
  </div>
  <div id="three">3
    <div class="content-container">
      text
    </div>
  </div>
  <div id="four">4
    <div class="content-container">
      text
    </div>
  </div>
  <div id="five">5
    <div class="content-container">

      text
    </div>
  </div>
  <div id="six">6
    <div class="content-container">
      text
    </div>
  </div>


</div>

标签： htmlcsscss-grid

Answer 1

您需要覆盖网格自动放置算法，该算法会在未明确定义时计算渲染网格区域的“正确”位置。

您正在定义行。也只需定义列。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px 100px 100px 100px 100px;
  grid-gap: 10px;
}

#one {
  grid-row: 1 / span 4;
  grid-column: 1; /* new */
}

#two {
  grid-row: 1 / span 4;
  grid-column: 2; /* new */
}

#three {
  grid-row: 2 / span 4;
  grid-column: 1; /* new */
}

#four {
  grid-row: 2 / span 4;
  grid-column: 2; /* new */
}

* {
  font-family: Helvetica;
  font-size: 1em;
  color: white;
  text-align: center;
}

img {
  display: block;
  margin: 20px 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(141, 110, 99);
  max-width: 50%;
  height: auto;
}

.container div:nth-child(even) {
  background-color: orange;
}

.container div:nth-child(odd) {
  background-color: purple;
}

<div class="container">
  <div id="one">1
    <div class="content-container"></div>
  </div>
  <div id="two">2
    <div class="content-container">text</div>
  </div>
  <div id="three">3
    <div class="content-container">text</div>
  </div>
  <div id="four">4
    <div class="content-container">text</div>
  </div>
  <div id="five">5
    <div class="content-container">text</div>
  </div>
  <div id="six">6
    <div class="content-container">text</div>
  </div>
</div>

您会注意到#oneand #three、 and#two和#four, 看起来不是相同的高度。事实上，他们是。

问题是您已经设置#three并#four开始跨越网格行第 2 行。

好吧，#one并且#two设置为从网格第 1 行开始，跨越 4 行，所以它们是重叠#three的#four（反之亦然）。您需要从第 5#three行#four网格开始。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100px 100px 100px 100px 100px 100px;
  grid-gap: 10px;
  grid-auto-rows: 100px; /* added to accommodate more rows */
}

#one {
  grid-row: 1 / span 4;
  grid-column: 1;
}

#two {
  grid-row: 1 / span 4;
  grid-column: 2;
}

#three {
  grid-row: 5 / span 4;
  grid-column: 1;
}

#four {
  grid-row: 5 / span 4;
  grid-column: 2;
}

* {
  font-family: Helvetica;
  font-size: 1em;
  color: white;
  text-align: center;
}

img {
  display: block;
  margin: 20px 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: rgb(141, 110, 99);
  max-width: 50%;
  height: auto;
}

.container div:nth-child(even) {
  background-color: orange;
}

.container div:nth-child(odd) {
  background-color: purple;
}

<div class="container">
  <div id="one">1
    <div class="content-container"></div>
  </div>
  <div id="two">2
    <div class="content-container">text</div>
  </div>
  <div id="three">3
    <div class="content-container">text</div>
  </div>
  <div id="four">4
    <div class="content-container">text</div>
  </div>
  <div id="five">5
    <div class="content-container">text</div>
  </div>
  <div id="six">6
    <div class="content-container">text</div>
  </div>
</div>