How to set up CSS Grid for a masonry layout
Create a responsive masonry grid using CSS Grid and column-count for seamless image stacking without JavaScript libraries or complex calculations.
You will create a responsive masonry grid layout using standard CSS properties without relying on JavaScript libraries or complex JavaScript calculations. These steps target modern browsers supporting CSS Grid and the column-count property, specifically Chrome 108+, Firefox 52+, and Safari 14.1+. You will define a grid container, set column counts for responsiveness, and use gap to control spacing between items.
Prerequisites
- A code editor like VS Code or Sublime Text installed on your machine.
- A local web server running (Apache, Nginx, or a simple file server).
- A basic understanding of HTML structure and CSS syntax.
- A modern browser to test the layout in real-time.
Step 1: Create the HTML structure
Create a new HTML file named index.html and add a container div with the class masonry-grid. Inside this container, add multiple article or div elements representing your content items, such as images or cards. Each item should have a unique height to simulate the uneven content typical of masonry layouts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masonry Grid Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="masonry-grid">
<article class="item"><img src="image1.jpg"></article>
<article class="item"><img src="image2.jpg"></article>
<article class="item"><img src="image3.jpg"></article>
<article class="item"><img src="image4.jpg"></article>
<article class="item"><img src="image5.jpg"></article>
<article class="item"><img src="image6.jpg"></article>
</div>
</body>
</html>Step 2: Define the grid container
Open your style.css file and select the .masonry-grid class. Set the display property to grid to enable grid layout. Define the columns using the column-count property to create the masonry effect. Set the column-gap property to control the horizontal spacing between columns.
.masonry-grid {
display: grid;
column-count: 4;
column-gap: 20px;
}Step 3: Style the grid items
Select the .item class to style the individual content blocks. Set the width to 100% so each item fills its column. Use break-inside: avoid to prevent items from being split across columns, which maintains the masonry look. Add basic styling for images to ensure they fit within their containers.
.item {
width: 100%;
margin-bottom: 20px;
break-inside: avoid;
background-color: #f0f0f0;
}
.item img {
width: 100%;
height: auto;
display: block;
}Step 4: Make the grid responsive
Add media queries to adjust the number of columns based on screen width. For tablets, reduce the column count to three. For mobile devices, set the column count to two. Ensure the gap adjusts slightly for smaller screens to maintain readability.
@media (max-width: 1024px) {
.masonry-grid {
column-count: 3;
column-gap: 15px;
}
}
@media (max-width: 768px) {
.masonry-grid {
column-count: 2;
column-gap: 10px;
}
}
@media (max-width: 480px) {
.masonry-grid {
column-count: 1;
column-gap: 5px;
}
}Verify the installation
Open index.html in your browser and resize the window to test responsiveness. You will see the grid adjust from four columns to three, then two, and finally one as the screen shrinks. Check that images do not break between columns and that the layout remains consistent across different screen sizes.
Browser Console Output (Optional):
No errors should appear in the console if the CSS is valid.Troubleshooting
If images appear broken between columns, check the break-inside property. The error might occur if break-inside: avoid is missing from the .item class. Ensure the property is set correctly to prevent splitting.
If the grid does not reflow on smaller screens, verify the media query syntax. A common mistake is using incorrect syntax like @media screen (max-width: 768px) instead of @media (max-width: 768px). Remove unnecessary keywords to fix the issue.
If the column count does not change, ensure the column-count property is supported by the browser. Older browsers may not support this property. Add a fallback using display: block for unsupported browsers.
/* Fallback for unsupported browsers */
.masonry-grid {
display: block;
column-count: 1;
}
/* Modern browsers override this */
.masonry-grid {
display: grid;
column-count: 4;
}For images that do not load, check the src attribute in the HTML. Ensure the image paths are correct and the files exist in the expected directory. If the images are not loading, the browser will display a broken image icon, which might look like a layout error.
If the gap between columns is inconsistent, check the column-gap property. Ensure the value is set in pixels or a valid unit like rem. Invalid units might cause the gap to be ignored or behave unexpectedly.
/* Correct gap syntax */
.masonry-grid {
column-gap: 20px; /* Valid */
}
/* Incorrect gap syntax */
.masonry-grid {
column-gap: 20; /* Invalid, should include unit */
}If the layout looks distorted on high-DPI displays, adjust the font-size and image-rendering properties. Use image-rendering: auto to ensure images scale correctly on retina screens without becoming blurry.
Finally, clear your browser cache and reload the page if changes do not appear. Some browsers cache CSS files aggressively, which might prevent new styles from loading immediately. Use Ctrl + F5 or Cmd + Shift + R to force a hard refresh.