How to obtain the following layout using only CSS (no JS) and the same HTML markup of the code snippet below for both narrow and large viewport?
- Box marked 1/2/3 are images. There could be max 5 images and dimensions are not predictable. They are marked with classes: .img-0; .img-1; .img-2; etc...
I tried with the code below but when viewed on a large viewport the images overlap because they are in the same grid area.
.panel-body {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"img-0"
"title"
"date"
"text"
"info-request"
"img-1"
"img-2"
"img-3"
"img-4";
gap: 10px;
}
h1 { grid-area: title }
.state-default { grid-area: date }
.text { grid-area: text }
.info-request { grid-area: info-request }
.info-request button { display: block }
.img-0 { grid-area: img-0; }
.img-1 { grid-area: img-1; }
.img-2 { grid-area: img-2; }
.img-3 { grid-area: img-3; }
.img-4 { grid-area: img-4; }
@media (min-width: 168px) {
.panel-body {
grid-template-rows: repeat(6, minmax(0, auto)) 1fr;
grid-template-areas:
"img title"
"img date"
"img text"
"img info-request";
}
.img-0 { grid-area: img; }
.img-1 { grid-area: img; }
.img-2 { grid-area: img; }
.img-3 { grid-area: img; }
.img-4 { grid-area: img; }
}<div class="panel-body">
<h1>This is the title</h1>
<h3 class="state-default">24/05/2022</h3>
<div class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
<img src="https://via.placeholder.com/300x200/7ac943/ffffff" class="img-0">
<img src="https://via.placeholder.com/300x300/ff931e/ffffff" class="img-2">
<img src="https://via.placeholder.com/200x300/3fa9f5/ffffff" class="img-3">
<div class="info-request">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</div>I could fix the large viewport layout but then I'm not able to do the narrow viewport layout.