how avoid figcaption wrapping with media query - css

Question

i'm working now with media query and once i reach the breakpoint of 768px the text goes
all below the images, not following them.
I would like the text to follow the images and to be under each one once it reach the 768px breakpoint.
any suggestion to avoid this problem?
thanks.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 200px;
grid-gap: 20px;
justify-content: center;
align-content: center;
}
#media (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
/* contenuto1 */
.grid {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
grid-gap: 150px;
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<img src="1w.webp" class="img"/>
<img src="2w.webp" class="img"/>
<img src="3w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
<figcaption class="caption">Maglieria</figcaption>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>

Answer 1

I suggest you do not use a grid unless you know how to manipulate it. I suggest you use display flex because it's easier to manipulate and more simple.
and to put text under each image, you must understand the importance of HTML structure for that. so put each image with its text in a container, then style them according to that.
I used display flex here:
img {
width: 100%;
min-width: 300px;
height: 100%;
object-fit: contain;
}
.grid {
display: flex;
/* grid-template-columns: repeat(3, 1fr); */
margin-top: 200px;
grid-gap: 20px;
justify-content: center;
align-content: center;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
.grid {
flex-direction: column;
}
img {
width: 80%;
min-width: 200px;
}
/* contenuto1 */
/* .grid {
display: flex;
flex-wrap: wrap;
margin-top: 100px;
grid-gap: 150px;
} */
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<div class="img1 container" >
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</div>
<div class="img2 container" >
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</div>
<div class="img3 container" >
<img src="3w.webp" class="img"/>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>
</div>

Answer 2

Put <img> and <figcaption> inside <figure>:
<figure>
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</figure>
<figure>
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</figure>

Answer 3

Try this:
.grid-container {
display: flex;
flex-wrap: wrap;
flex-direction:row;
margin-top: 100px;
}
img {
width: 100%;
object-fit: contain;
}
.grid{
width:31%;
margin:1%;
}
#media (max-width: 768px) {
/* navbar */
* {
margin: 0;
box-sizing: border-box;
}
.nav-links, .search{
display: none;
}
.logo {
height: 64px;
width: 126px;
filter: invert(100%);
padding: 1px;
}
.grid{
width:100%;
}
.caption{
margin:10px auto 25px;
}
}
<div class="titolo-grid">
<h2>In evidenza</h2>
</div>
<div class="grid-container">
<div class="grid">
<img src="1w.webp" class="img"/>
<figcaption class="caption">I riflessi fluidi dell'autunno</figcaption>
</div>
<div class="grid">
<img src="2w.webp" class="img"/>
<figcaption class="caption">Maglieria</figcaption>
</div>
<div class="grid">
<img src="3w.webp" class="img"/>
<figcaption class="caption">Scarpe Made In Italy</figcaption>
</div>
</div>
you need to put img and figcaption inside the grid element and use Flex instead of Grid some codes: