Блог

У меня есть следующий код, в котором у меня есть 4 раздела страницы — галерея, раздел электронной коммерции, некоторый контент и некоторый призыв к действиям.

 .wrapper {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
}  

 <div class="wrapper">
  <div>Gallery</div>
  <div>Ecommerce<br>Ecommerce<br>Ecommerce</div>
  <div>Content</div>
  <div>CTAs</div>
</div>  

Исходя из первого подхода для мобильных устройств, мы хотим, чтобы страница отображалась как есть с разделом электронной коммерции непосредственно под галереей, но на рабочем столе мы хотим, чтобы было 2 столбца с галереей и контентом, сгруппированными вместе, и группой ecom и ctas во втором столбце.

Однако, если мы сделаем это, используя приведенный выше код, это создаст пустое пространство над содержимым, если раздел электронной коммерции длиннее, чем галерея, или пустое пространство над разделом CTA, если галерея длиннее, чем раздел электронной коммерции.

Есть ли какой-либо способ, чтобы на рабочем столе содержимое размещалось непосредственно под галереей без пробелов (т. Е. Могу ли я как-то сгруппировать два раздела, чтобы они были одним столбцом)?

Я подумал, может быть, что-то, использующее области сетки (но следующее делает содержимое размещенным поверх галереи):

 @media (min-width: 750px) {
  .wrapper {
    display: grid;
    grid-template-areas: "column1 column2";
  }
  
  .column-1 {
    grid-area: column1;
  }
  
  .column-2 {
    grid-area: column2;
  }
}  

 <div class="wrapper">
  <div class="column-1">Gallery</div>
  <div class="column-2">Ecommerce<br>Ecommerce<br>Ecommerce</div>
  <div class="column-1">Content</div>
  <div class="column-2">CTAs</div>
</div>  

Если есть решение, отличное от css grid, я также приму это. Но нет фиксированных высот или абсолютного позиционирования, поскольку содержимое динамическое, а ниже есть другое содержимое

Я думаю, что единственное решение — использовать дополнительные оболочки и полагаться на display:contents

 .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  border:1px solid;
  margin:5px;
}
.wrapper > div {
  display:contents;
}
.wrapper > div:first-child > div:first-child {
  order:1;
}
.wrapper > div:first-child > div:last-child {
  order:3;
}
.wrapper > div:last-child > div:first-child {
  order:2;
}
.wrapper > div:last-child > div:last-child {
  order:4;
}

@media (min-width: 750px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
  .wrapper > div {
    display:block;
  }
}  

 <div class="wrapper">
  <div>
    <div>Gallery</div>
    <div>Content</div>
  </div>
  <div>
    <div>Ecommerce<br>Ecommerce<br>Ecommerce</div>
    <div>CTAs</div>
  </div>
</div>
<div class="wrapper">
  <div>
    <div>Gallery</div>
    <div>Content<br>Content<br>Content</div>
  </div>
  <div>
    <div>Ecommerce</div>
    <div>CTAs</div>
  </div>
</div>