Display side by side image grid

Share & showcase
34

I have been playing with the idea and came up with another css grid solution based on this idea, which works well for my needs:

.img-grid .markdown-preview-section > div > p {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 100%));
	column-gap: 1rem;
	row-gap: 1rem;
	align-items: stretch;
}
.img-grid .markdown-preview-section > div > p > img + br{display: none;}
.img-grid .markdown-preview-section img:not(:active) {
	object-fit:cover;
	width: 100%;
	height: auto;
}

You can just change the number 5 in the line…
grid-template-columns: repeat(5, minmax(0, 100%));
…to adjust the amount of columns you want to use.

You could even create different css snippets for different amount of columns, for example img-grid3 for 3 columns and img-grid5 for 5 columns.

1 Like