在网格布局内插入全宽块答案

【问题标题】：Insert full width block inside grid layout在网格布局内插入全宽块
【发布时间】：2019-11-08 12:38:35
【问题描述】：

我正在创建一个 Google 图片之前的页面布局。在所选图像下方有一个带有大全部分的图像网格。我很好奇是否可以使用 css disaply: grid 属性标记此页面。

起初我用三列制作容器。一切都很棒：

.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 操作的情况下创建这个布局。

【问题讨论】：

几个月前我试过了 - codepen.io/Paulie-D/pen/zWgjgW

标签： html css css-grid

【解决方案1】：

在.container 上设置grid-auto-flow: row dense;。将.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>

【讨论】：