Css -grid: как добавить блок и заставить другие элементы двигаться вверх? - PullRequest
Новая
       36

Css -grid: как добавить блок и заставить другие элементы двигаться вверх?

0 голосов
/ 30 апреля 2020

У меня есть 2 условия макета.

(1) layout-one

(2) layout-two

Я хочу динамически удалить или добавить блок 2 и переключение между макетами. Можно ли справиться с этим через css -grid?

1 Ответ

2 голосов
/ 30 апреля 2020

CSS Сетка предназначена для определения макетов сетки.

Il позволит вам определить столько макетов, сколько вы хотите, но вы не сможете переключаться между макетами, полагаясь только на на CSS сетках.

Вам придется обрабатывать это программно или с помощью других функций CSS (например, медиа-запросов, если вы хотите выбрать макет на основе ширины экрана).

Способ сделать это - определить макеты сетки с указанными c CSS классами в контейнере сетки и переключаться между классами, используя внешний скрипт (или условие, основанное на состоянии вашего приложения, если оно уже есть).

Демонстрация: https://jsbin.com/jolupoguni/1/edit?html, css, js, выход

JS: 

const toggleLayout = () => {
var element = document.getElementById("grid");
  if (element.classList.contains('grid--layout-1')) {
     element.classList.remove('grid--layout-1');
     element.classList.add('grid--layout-2');
   } else {
     element.classList.remove('grid--layout-2');
     element.classList.add('grid--layout-1');
   }
}

CSS: 

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.grid--layout-1 .block-a {
  grid-column: span 12;
}
.grid--layout-1 .block-b {
  grid-column: span 6;
}
.grid--layout-1 .block-c {
  grid-column: span 6;
}

.grid--layout-2 .block-a {
  grid-column: span 12;
}
.grid--layout-2 .block-b {
  display: none
}
.grid--layout-2 .block-c {
  grid-column: span 12;
}

HTML

<button onclick="toggleLayout()">Switch layout</button>
<div id="grid" class="grid grid--layout-1">
  <div class="block block-a">Block A</div>
  <div class="block block-b">Block B</div>
  <div class="block block-c">Block C</div>
</div>

Для получения дополнительной информации о CSS сетках, курс Wes Bos 'CSS Grid - фантастический c ресурс https://cssgrid.io/

...