Insert Full Width Block Inside Grid Layout

I'm creating a page layout that Google Images has some time ago. There is a grid of images with large full with section under selected image. And I'm curious is it possible to mark

Solution 1:

Set the grid-auto-flow: row dense; on the .container. Move the .item__description outside of item, and set grid-column: 1 / span 3; on it.

.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;
}

<divclass="container"><divclass="item"></div><divclass="item__description">Description of the first item</div><divclass="item"></div><divclass="item"></div><divclass="item"></div><divclass="item__description">Description of the last item. No matter where to place this description: inside or outside 'item' block</div></div>

This will also work with display toggling (hover an item):

.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;
}

<divclass="container"><divclass="item">Hover Me 1</div><divclass="item__description">Description of the item 1</div><divclass="item">Hover Me 2</div><divclass="item__description">Description of the item 2</div><divclass="item">Hover Me 3</div><divclass="item__description">Description of the item 3</div><divclass="item">Hover Me 4</div><divclass="item__description">Description of the item 4</div></div>