CSS сетка - можем ли мы настроить разрыв в соответствии со строками?

#html #css #layout #css-grid

#HTML #css #макет #css-сетка

Вопрос:

Я пытаюсь воссоздать картину Мондриана.

 .wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
    display: grid;
    grid-gap: 40px 20px;
    grid-template-rows: 178px 219px 61px 63px;
    grid-template-columns: 128px 392px 44px;
 
}
div {
    border: 1px solid black;
    background-color: white;
    opacity: 0.5;
}
.a {
    grid-row: 1/2;
    grid-column: 1/2;

}
.b {
    grid-row: 2/3;
    grid-column: 1/2;
}
.c {
    grid-row: 1/3;
    grid-column: 2/4;
}
.d {
    grid-row: 3/5;
    grid-column: 1/2;
}
.e {
  grid-row: 3/5;
    grid-column: 2/3;   
}
.f {
    grid-row: 3/4;
    grid-column: 3/4;
 }

 <body>
    <div class="wrapper">
        <div class="a">a</div>
        <div class="b">b</div>
        <div class="c">c</div>
        <div class="d">d</div>
        <div class="e">e</div>
        <div class="f">f</div>
        <div class="g">g</div>
    </div>
</body>

Я в значительной степени справился с макетом. Проблема в том, что между строками разные значения пробелов. Итак, на одном есть, например, 24px, а на другом 40px. Есть ли способ a применять разные значения к пробелам в разных строках. Или я должен быть удовлетворен этим существующим.
Спасибо!

Ответ №1:

У вас не может быть нескольких размеров разрыва в одной сетке.

Обходным путем было бы использовать наименьший размер разрыва для сетки и дополнять его полями, когда это необходимо:

 .wrapper {
  width: 600px;
  height: 600px;
  background: url(painting.png) no-repeat;
  display: grid;
  grid-gap: 20px 20px;
  grid-template-rows: 178px 219px 61px 63px;
  grid-template-columns: 128px 392px 44px;
}

div {
  border: 1px solid black;
  background-color: blue;
  opacity: 0.5;
}

.a {
  grid-row: 1/2;
  grid-column: 1/2;
  margin-bottom: 20px;
}

.b {
  grid-row: 2/3;
  grid-column: 1/2;
}

.c {
  grid-row: 1/3;
  grid-column: 2/4;
}

.d {
  grid-row: 3/5;
  grid-column: 1/2;
}

.e {
  grid-row: 3/5;
  grid-column: 2/3;
}

.f {
  grid-row: 3/4;
  grid-column: 3/4;
}

 <body>
  <div class="wrapper">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
    <div class="d">d</div>
    <div class="e">e</div>
    <div class="f">f</div>
    <div class="g">g</div>
  </div>
</body>