Core Code
Core Code Modern Dev Handbook

Grid Gallery Layout

Grid simplifies building responsive galleries.

Preview

Code

<style>
.gallery{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}

.gallery img{
width:100%;
}
</style>

<div class="gallery">
<img src="https://via.placeholder.com/200">
<img src="https://via.placeholder.com/200">
<img src="https://via.placeholder.com/200">
<img src="https://via.placeholder.com/200">
</div>

More Grid Container Examples (8)

example Basic Grid Container open example example Grid Template Columns open example example Grid Template Rows open example example Grid Gap open example example Justify Content open example example Align Content open example example Place Content open example example Grid Layout Example open example