CSS
Design an Asymmetrical Image Gallery with CSS Grid
Create visually dynamic and asymmetrical image galleries using CSS Grid's explicit placement and spanning properties to highlight specific images.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
grid-template-rows: repeat(3, 120px); /* 3 fixed-height rows */
gap: 10px;
max-width: 900px;
margin: 20px auto;
}
.gallery-item {
background-color: #eee;
border: 1px solid #ccc;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
}
/* Span multiple columns and rows for specific items */
.gallery-item:nth-child(1) { /* First item takes 2x2 space */
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
.gallery-item:nth-child(2) { /* Second item takes 2x1 space */
grid-column: 3 / span 2;
grid-row: 1 / span 1;
}
.gallery-item:nth-child(5) { /* Fifth item takes 1x2 space */
grid-column: 4 / span 1;
grid-row: 2 / span 2;
}
How it works: This CSS Grid snippet demonstrates how to create an asymmetrical gallery layout by explicitly placing and spanning grid items. The `.gallery` container defines a grid with four equal-width columns (`repeat(4, 1fr)`) and three fixed-height rows. Individual `.gallery-item`s then use `grid-column` and `grid-row` with the `span` keyword to occupy multiple tracks, creating varied sizes and a dynamic visual hierarchy, perfect for image portfolios or featured content.