CSS

CSS Grid: Create a Responsive Photo Gallery Layout

Build a beautiful and responsive photo gallery using CSS Grid. This snippet dynamically adjusts column counts based on screen size with 'repeat(auto-fit, minmax(250px, 1fr))'.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}
How it works: This CSS Grid snippet creates a responsive photo gallery. 'display: grid' enables grid layout. 'grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))' ensures columns are automatically created, each at least 250px wide, and expand to fill available space. 'gap' adds spacing between grid items, making it ideal for dynamic image or card layouts.

Related CSS Snippets

Need help integrating this into your project?

Our team of expert developers can help you build your custom application from scratch.

Hire DigitalCodeLabs