CodePen Embed - grid-auto-columns

<section class="grid-auto-columns">
  <img src='https://images.unsplash.com/photo-1714394692179-022d20b92995?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714428203754-7d5fbfc5f6c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714573807782-d1ecd741a9fc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1716316858979-1bd9fd9da3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714733710303-14d96608272a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTI5OTV8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1715412406617-e76cd73e644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTI5OTV8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>

.grid-auto-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.5rem;
  
  & img {
    max-width: 100%;
  }
}

This Pen is owned by julian cordoba on CodePen.

See more by @omega5300 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.