I am currently working on a page layout inspired by Google Images. It features a grid of images with a large full-width section underneath the selected image. I am interested to see if it is achievable using CSS properties like display: grid.
https://i.sstatic.net/JRx5R.png
Initially, I set up a container with three columns and everything seems to be working fine:
.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>However, I am struggling with how to incorporate a description block within this grid. I am unsure if it is even possible. My plan is to toggle the descriptions using display: none | block, but since the number of images and rows is dynamic, I am facing some challenges.
.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>The ultimate goal is to achieve this layout without relying on any JavaScript DOM manipulations.