Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
The example component is visible below.
🎅
🤶
🎄
🎁
🕯️
👼
🍖
🍠
🍫
🍬
🍾
🥂
📺
🍿
A few notes about this gallery component:
- CSS Variables are used for grid and font size,
- the
calc
function and viewport units are used for grid and font size, - CSS Grid is used for the grid,
- the
auto-fill
keyword is used to fill the grid columns with items, - the
minmax
function is used to declare the minimum and maximum size of the grid item, - less than 10 lines of CSS for a fully responsive gallery that works on most modern browsers 🤯.
The code:
<div class="advent-gallery">
<div>🎅</div>
<div>🤶</div>
<div>🎄</div>
<div>🎁</div>
<div>🕯️</div>
<div>👼</div>
<div>🍖</div>
<div>🍠</div>
<div>🍫</div>
<div>🍬</div>
<div>🍾</div>
<div>🥂</div>
<div>📺</div>
<div>🍿</div>
</div>
.advent-gallery {
--size-xmas: calc(4rem + 2vw);
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(var(--size-xmas), 1fr));
place-items: center;
font-size: var(--size-xmas);
}