Mahir freeCodeCamp • workshop-flexbox-photo-gallery

Step 19: Your images need some space between them

Ringkasan Tantangan

Your images need some space between them.

The gap CSS shorthand property sets the gaps, also known as gutters, between rows and columns. The gap property and its row-gap and column-gap sub-properties provide this functionality for flex, grid, and multi-column layout. You apply the property to the container element.

Give your .gallery flex container a gap property with 16px as the value.

💡 Lihat Solusi

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  max-width: 1400px;
  margin: 0 auto;
  gap: 16px;
}