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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to load variables, functions, and mixins from another module in SCSS?SCSSWhat is HTMLUnknownElement?HTMLJavaScript: Methods for HTML DOM classList PropertyJavaScriptHow to remove N/A from Radio Button list in Drupal?DrupalIN Operator in PostgreSQLPostgresWhat’s a Log File and What are Log File Monitors?MiscellaneousHow to check if the page is single post page in WordPress?WordPressHow to enable GD library support for PHP on windows server?PHPHow to pass arguments in SCSS function?SCSSSome Useful Operators in The SQL WHERE ClauseSQL/MySQLFULL OUTER JOIN in PostgresPostgresWhat’s a Closure in JavaScript?JavaScript