Получение сетки-строки для переопределения сетки-шаблона-строки

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>

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>

Вы заметите, что #one и #three, #two и #four не кажутся одинаковыми по высоте.На самом деле это так.

Проблема в том, что вы установили #three и #four для начала охвата в строке строки сетки 2.

Ну, #one и #twoустанавливаются на начало строки строки сетки 1 и охватывают 4 строки, поэтому они перекрываются #three и #four (или наоборот).Вам нужно будет начать #three и #four в строке строки сетки 5.

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