How to create a masonry layout using CSS columns

You will create a responsive masonry grid layout using CSS columns and flexbox. These steps target modern browsers including Chrome, Firefox, Safari, and Edge. You will use the column-count and column-width properties to arrange items of different heights without gaps.

Prerequisites

• A code editor like VS Code or Sublime Text
• A modern browser (Chrome 80+, Firefox 70+, Safari 12+, Edge 80+)
• Basic knowledge of HTML and CSS
• Access to a local development server or live site

Step 1: Create the HTML structure

Create an HTML file with a container div and several image items. Use placeholder images of varying heights to simulate real-world content like blog posts or product cards.

<div class="masonry-container">
  <div class="item">
    <img src="https://picsum.photos/300/400" alt="Image 1">
  </div>
  <div class="item">
    <img src="https://picsum.photos/300/200" alt="Image 2">
  </div>
  <div class="item">
    <img src="https://picsum.photos/300/300" alt="Image 3">
  </div>
  <div class="item">
    <img src="https://picsum.photos/300/500" alt="Image 4">
  </div>
  <div class="item">
    <img src="https://picsum.photos/300/250" alt="Image 5">
  </div>
  <div class="item">
    <img src="https://picsum.photos/300/350" alt="Image 6">
  </div>
</div>

Step 2: Apply the column-based masonry layout

Add CSS rules to the container to enable the column layout. Set the number of columns based on screen width using media queries. Use column-width to control the width of each column and gap to add spacing between them.

.masonry-container {
  column-count: 3;
  column-width: 300px;
  column-gap: 1rem;
  column-rule: 1px solid #ddd;
}

.item {
  break-inside: avoid;
  margin-bottom: 1rem;
}

Step 3: Adjust for smaller screens

Modify the layout for tablets and mobile devices by reducing the number of columns. Use media queries to adjust column-count and column-width for different breakpoints. Ensure images remain responsive and do not overflow their containers.

@media (max-width: 768px) {
  .masonry-container {
    column-count: 2;
    column-width: 250px;
  }
}

@media (max-width: 480px) {
  .masonry-container {
    column-count: 1;
    column-width: 100%;
  }
}

Step 4: Add fallback for older browsers

Include a flexbox fallback for browsers that do not support CSS columns. This ensures the layout remains functional even when column properties are ignored. Use a simple flex-wrap layout as a backup option.

.masonry-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  flex: 0 0 auto;
  width: calc(33.333% - 1rem);
  margin-right: 1rem;
}

Verify the installation

Open your browser and inspect the masonry container. Resize the window to see how the layout adapts to different screen sizes. You should see images stacked vertically in columns with consistent spacing. Check that no images are cut off at the column breaks.

Expected output in browser:
- Desktop: 3 columns with 1rem gap
- Tablet: 2 columns with 1rem gap
- Mobile: 1 column full width

Troubleshooting

If images appear cut off at column breaks, add break-inside: avoid to the item class. This prevents content from splitting across columns. If the layout does not adapt to screen size, check your media query breakpoints. Ensure the column-count property is set correctly for each breakpoint.

Some browsers may not support column-count below version 80. In such cases, the flexbox fallback will take over. If the gap between columns looks inconsistent, verify that column-gap is set uniformly. Clear browser cache if styles do not load as expected.

For performance-critical sites, consider using a JavaScript library like Masonry.js if CSS columns do not meet your layout requirements. However, CSS columns are sufficient for most use cases and require no external dependencies.