Day 3: Gallery 🍿

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);
}