Yogesh Chauhan's Blog

Responsive Masonry Grid using CSS columns Property

in CSS on July 20, 2021

There are different ways to make grid using CSS in-built properties. You can use Flex or Grid or just block with columns! Let’s use the last option to do that.

Step 1: HTML

Just a simple container and images using picsum API call. Any random images with manually typing random width and height. We’ll adjust the height and width using CSS later on.

Step 2: CSS

This few lines of SCSS is what does the trick!

You can change the number of columns from 4 to 5 or 3 as per your requirements.


.grid-container {
  columns: 4 10rem;
  column-gap: 1rem;
  width: 90%;
  padding: 0 5%;

  .img-container {
    margin-bottom: 1rem;

    img {
      width: 100%;
      border-radius: 1rem;
    }
  }
}


Checkout the demo:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Overview of Drupal and how it worksDrupalHow to create a placeholder loader (throbber) using CSS?CSSHow to create a simple text and image slider using CSS and JavaScript?CSSSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousWhat is a component helper function in React?ReactAngular 9 time clock update every minute, second, hourAngularHow to Use SQL MAX() Function with Dates?SQL/MySQLCSS Overflow Property with ExamplesCSSClean Form Input With These PHP Functions Before Inserting into DatabasePHPHow to use images instead of HTML radio buttons using CSS?CSSHow to hide a DIV on clicks outside of it using jQuery?jQuerySQL ANY OperatorSQL/MySQL