Вставьте блок полной ширины в сетку - PullRequest
Новая
       32

Вставьте блок полной ширины в сетку

0 голосов
/ 08 ноября 2019

Я создаю макет страницы, который есть у Google Images некоторое время назад. Под выбранным изображением находится сетка изображений с большим полным разделом. И мне любопытно, можно ли пометить эту страницу свойством css disaply: grid.

grid page template

Сначала я создал контейнер с тремя столбцами. Все отлично: 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  border: 1px solid;
  height: 20px;
}
<div class="container">
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
  <div class="item"></div>  
</div>

Но я понятия не имею, как вставить блок описания в эту сетку. Я не уверен, что это вообще возможно. Я собираюсь переключать описания через display: none | block. Количество изображений и строк неизвестно. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  border: 1px solid;
  height: 20px;
}

.item__description {
  border: 1px solid red;
  height: 10px;
}
<div class="container">
  <div class="item">
    <div class="item__description">Description of the first item</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>  
  <div class="item"></div>
  <div class="item__description">Description of the last item. No matter where to place this description: inside or outside 'item' block</div>
</div>

Идея заключается в создании этого макета без каких-либо манипуляций с JS DOM.

1 Ответ

2 голосов
/ 08 ноября 2019

Установите grid-auto-flow: row dense; на .container. Переместите .item__description за пределы элемента и установите grid-column: 1 / span 3; на нем. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 20px;
}

.item {
  border: 1px solid;
  height: 20px;
}

.item__description {
  grid-column: 1 / span 3;
  border: 1px solid red;
  height: 20px;
}
<div class="container">
  <div class="item"></div>
  <div class="item__description">Description of the first item</div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item__description">Description of the last item. No matter where to place this description: inside or outside 'item' block</div>
</div>

Это также будет работать с переключением дисплея (наведите курсор на элемент): 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 20px;
}

.item {
  border: 1px solid;
  height: 20px;
}

.item__description {
  display: none;
  grid-column: 1 / span 3;
  border: 1px solid red;
  height: 20px;
}

.item:hover + .item__description {
  display: block;
}
<div class="container">
  <div class="item">Hover Me 1</div>
  <div class="item__description">Description of the item 1</div>
  <div class="item">Hover Me 2</div>
  <div class="item__description">Description of the item 2</div>
  <div class="item">Hover Me 3</div>
  <div class="item__description">Description of the item 3</div>
  <div class="item">Hover Me 4</div>
  <div class="item__description">Description of the item 4</div>
</div>
...