{"id":72518,"date":"2024-08-08T21:00:50","date_gmt":"2024-08-08T13:00:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=72518"},"modified":"2024-10-29T19:56:51","modified_gmt":"2024-10-29T11:56:51","slug":"native-css-masonry-grid","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/native-css-masonry-grid\/","title":{"rendered":"Native CSS Masonry Grid"},"content":{"rendered":"

One popular layout style on the web is the masonry<\/em><\/strong> layout, often used in image galleries and portfolio websites to display images or items of varying sizes.<\/p>\n

Traditionally, creating a masonry<\/em> layout required JavaScript libraries, such as the popular Masonry.js by DeSandro<\/a> and MiniMasonry<\/a>. However, with CSS Grid<\/a>, you can now create this layout using pure CSS<\/strong>.<\/p>\n

In this article, we will explore what a CSS Grid masonry layout is and provide some examples to help you understand how it works. Let\u2019s get started.<\/p>\n

\n

Getting Started<\/h2>\n

CSS Grid<\/strong> is a native CSS layout system that provides a grid-based framework where you can define rows and columns and place items within this grid. The masonry layout can be created by combining CSS Grid with certain properties that allow items to span multiple rows or columns, creating the masonry effect. Let\u2019s start with a simple example to understand the basics of creating a masonry layout using CSS Grid.<\/p>\n

First, we have the HTML. We have a container with eight items. Each item has a different height and width so that we can see the masonry effect more clearly.<\/p>\n

\r\n<div class=\"masonry\">\r\n    <div class=\"gallery\">\r\n        <figure>\r\n            <img src=\"images\/image-1.jpg\" width=\"600\" height=\"1200\" \/>\r\n        <\/figure>\r\n    <\/div>\r\n    <div class=\"gallery\">\r\n        <figure>\r\n            <img src=\"images\/image-2.jpg\" width=\"400\" height=\"200\" \/>\r\n        <\/figure>\r\n    <\/div>\r\n    \/\/ 6 more items...\r\n<\/div>\r\n<\/pre>\n
And, the CSS, as follows:<\/p>\n
\r\n.masonry {\r\n    display: grid;\r\n    grid-template-columns: repeat(6, 1fr);\r\n    grid-template-rows: masonry;\r\n    gap: 10px;\r\n}\r\n\/\/ More stylistic styles...\r\n<\/pre>\n
The grid-template-columns<\/code> property defines six equal columns, the gap<\/code> property adds space between the grid items, and the grid-template-rows: masonry;<\/code> property creates the masonry layout based on the available space within the grid container.<\/p>\n
\"Default<\/figure>\n
You can adjust the layout behavior using the masonry-auto-flow<\/code> property. When set to next<\/code>, this property displays items in order along the grid axis instead of placing them in the track with the most free space. As shown below, the items are placed in order from left to right, top to bottom, regardless of the available space.<\/p>\n
\"Masonry<\/figure>\n
\n
Making It Responsive<\/h2>\n
One of the advantages of using CSS Grid is that it allows you to create responsive layouts with ease. You can use media queries to adjust the grid layout based on the screen size. For example, you can change the number of columns in the grid based on the screen width to ensure that the layout looks good on different devices.<\/p>\n
\r\n@media (max-width: 1200px) {\r\n    .masonry {\r\n        grid-template-columns: repeat(4, 1fr);\r\n    }\r\n}\r\n@media (max-width: 640px) {\r\n    .masonry {\r\n        grid-template-columns: repeat(2, 1fr);\r\n    }\r\n}\r\n<\/pre>\n
You can also change the repeat()<\/code> value to use auto-fill<\/code> and minmax()<\/code> functions to create a responsive layout that automatically adjusts the number of columns based on the available space. The minmax()<\/code> function allows you to set a minimum and maximum size for the columns, ensuring that they don\u2019t get too small or too large.<\/p>\n
\r\n.masonry {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n    grid-template-rows: masonry;\r\n    gap: 10px;\r\n}\r\n<\/pre>\n
That\u2019s it! You now have a responsive masonry layout that adjusts based on the screen size. You can experiment with different values for the minmax()<\/code> function and the gap<\/code> property to achieve the desired layout for your project.<\/p>\n
\n
Browser Support<\/h2>\n
It\u2019s important to note that CSS Grid with the masonry layout is still in the experimental stage and not yet supported in mainstream browsers.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n
Browser<\/th>\nVersion<\/th>\nSupport<\/th>\n<\/tr>\n<\/thead>\n
Google Chrome<\/td>\nNot supported<\/td>\n<\/td>\n<\/tr>\n
Firefox<\/td>\n77-131<\/td>\nExperimental. Can be enabled from config.<\/td>\n<\/tr>\n
Safari<\/td>\nTechnology Preview<\/td>\nSupported<\/td>\n<\/tr>\n
Microsoft Edge<\/td>\nNot supported<\/td>\n<\/td>\n<\/tr>\n
Opera<\/td>\nNot supported<\/td>\n<\/td>\n<\/tr>\n
Safari on iOS<\/td>\nTechnology Preview<\/td>\nSupported<\/td>\n<\/tr>\n
Android WebView<\/td>\nNot supported<\/td>\n<\/td>\n<\/tr>\n
Samsung Internet<\/td>\nNot supported<\/td>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
As shown in the table, you can view the masonry layout in the Safari Technology Preview<\/a> or Firefox.<\/p>\n
If you\u2019re using Firefox, type about:config<\/code> in the address bar, search for the configuration name, and set it to true<\/code>. The update will take effect immediately, so you can refresh the page without needing to restart the browser.<\/p>\n
\"Firefox<\/figure>\n
The status of browser support may change, so it\u2019s a good idea to check the latest updates from the respective browser documentation or support pages.<\/p>\n
\n
Wrapping Up<\/h2>\n
The CSS Grid masonry layout is a powerful tool that allows you to create complex grid-based layouts with ease. By combining CSS Grid with media queries and other CSS properties, you can create responsive masonry layouts that look great on all devices. While the masonry layout is still in the experimental stage, it is worth experimenting with to see how it can benefit your projects.<\/p>\n
Last but not least, here\u2019s a CodePen demo for you to try out. Enjoy!<\/p>\n
See the Pen CSS Grid Masonry<\/a> by HONGKIAT (@hkdc<\/a>) on CodePen<\/a>.<\/span><\/p>\n