The Image Grid is really flexible in being able to display images responsively but if you enable the ‘Display Image Title’ option, the length of the title can throw out the image grid and make the images appear stacked one above the other.
This CSS can force the captions to not stray beyond the width of the image and retain the grid presentation.
/* Force proper grid layout */
.sow-image-grid-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
justify-items: center;
}/* Each item behaves nicely */
.sow-image-grid-image {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.sow-image-grid-wrapper {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
justify-items: center;
}/* Each item behaves nicely */
.sow-image-grid-image {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Ensure images behave */
.sow-image-grid-image img {
max-width: 100%;
height: auto;
}
/* Caption styling */
.sow-image-grid-image .image-title {
margin-top: 8px;
font-size: 14px;
line-height: 1.4;
}
Adjust the width to match the image width size as appropriate, i.e. 150px in the above example.