Блог

Главная - Вопросы по программированию - Есть ли способ свернуть определенные пробелы в сетке?

Есть ли способ свернуть определенные пробелы в сетке?

#css #css-grid

#css #css-grid

Вопрос:

Я настроил шаблон сетки, но возникла проблема на уровне шаблона интерфейса. В принципе, наступает время, когда divs с назначенными областями сетки условно отображаются на странице. Поскольку у меня есть grid-row-gap объявление, оно поддерживает пробелы в областях шаблона сетки, которых нет на странице. Мне было интересно, есть ли способ свернуть эти пробелы, когда происходят подобные вещи.

 .grid {
  display: grid;
  grid-template-areas:
    'a b'
    'a c'
    'a d'
    'a e'
    'a f';
  grid-gap: 25px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}  
 <div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> -->
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

Ответ №1:

Вы можете думать иначе, используйте шаблон и диапазон вместо области, а margin вместо сетки.

   .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 1em;
  background: #bee;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
  grid-column: 2;
}

.a {
  grid-column: 1;
  grid-row: 1 / span 10;
  /* here what you think is enough */
}

.cell:nth-child(1)~.cell {
  margin-left: 24px;
}

.cell:nth-child(2)~.cell {
  margin-top: 24px;  
 <div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div>
  <div class="d cell">D</div>
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="d cell">D</div>
  <div class="f cell">F</div>
</div>

Ответ №2:

Не используйте области шаблонов и не отвечайте на автоматическое размещение:

 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  column-gap: 25px;
  margin:5px;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  border: 1px solid #000;
}

.grid .a {
  grid-row: span 5; /* take 5 rows */
}

/* to replace vertical gap, don't apply to "a" and last-child */
.cell:not(.a):not(:last-child) {
  margin-bottom:25px; 
}  
 <div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <!-- <div class="c cell">C</div> -->
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div> 
  <!-- <div class="d cell">D</div> -->
  <div class="e cell">E</div>
  <div class="f cell">F</div>
</div>

<div class="grid">
  <div class="a cell">A</div>
  <div class="b cell">B</div>
  <div class="c cell">C</div> 
</div>

Комментарии:

1. Я выбрал медиа-запросы, потому что в определенных точках останова позиции некоторых из этих элементов меняются. Я оставил это для краткости.

2. @CarlEdwards вы все равно можете изменить положение элемента, используя order свойство