{"id":38283,"date":"2017-10-11T21:01:02","date_gmt":"2017-10-11T13:01:02","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38283"},"modified":"2018-04-09T16:39:12","modified_gmt":"2018-04-09T08:39:12","slug":"brickjs-masonry-grid-script","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/","title":{"rendered":"Create Fast Masonry Grid Layouts with Bricks.js"},"content":{"rendered":"

It\u2019s always been pretty simple to create grids with jQuery<\/a><\/strong>, using plugins and free tutorials from developers.<\/p>\n

However, masonry grids are tougher to build, since they don\u2019t fit evenly across the page<\/strong>. You\u2019ll have fixed-size widths for columns but the item heights can vary wildly<\/strong>.<\/p>\n

To make a pixel-perfect masonry grid<\/strong> you need a plugin such as Bricks.js<\/a><\/strong>.<\/p>\n

This plugin is totally open-source and ridiculously fast. It\u2019ll render the grid in less than half a second<\/strong>, even with dozens of items on the page.<\/p>\n

Most people recognize masonry grids from Pinterest since they popularized the layout. But, it has since grown to be used in many other websites<\/a><\/strong>, too.<\/p>\n

Read Also:<\/strong> Grid.css \u2013 A Minimal Grid System for Web Developers<\/a><\/p>\n

To get started with Bricks.js, you\u2019ll need some content<\/strong> and a default page layout<\/strong>. You install the plugin right from npm or through GitHub<\/a> if that\u2019s easier.<\/p>\n

With the initial setup, you pass three specific parameters<\/strong>:<\/p>\n

    \n
  1. Container<\/a><\/strong> \u2013 a DOM container element<\/strong> for the grid<\/li>\n
  2. Packed<\/a><\/strong> \u2013 an attribute<\/strong> that determines how the items flow in the grid<\/li>\n
  3. Sizes<\/a><\/strong> \u2013 an array of widths and gutters<\/strong>, defined in pixels<\/li>\n<\/ol>\n

    The plugin uses all these values to automate the masonry grid from scratch.<\/p>\n

    And, you can even use it for infinite loading<\/a><\/strong> if you want masonry grids that work just like Pinterest.<\/p>\n

    \"Bricks.js<\/a><\/figure>\n

    Check out the demo page<\/a> for an interactive grid<\/strong> that you can alter for testing. You define the total number of elements<\/strong> and it\u2019ll automate the process while displaying the total rendering time.<\/p>\n

    For example, I tested a grid with 500 elements<\/strong> and it only took 13 milliseconds<\/strong> to complete. This doesn\u2019t factor in the time for all 500 images to load, but 13 ms for an auto-generated grid<\/strong> is very impressive.<\/p>\n

    Get started yourself by downloading the files from GitHub<\/a> and following the install instructions. This may feel confusing at first but the more you toy with it the easier it is to set up.<\/p>\n

    Read Also:<\/strong> Automate Your Grid Design Process with GridGuide<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    It\u2019s always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build, since they don\u2019t fit evenly across the page. You\u2019ll have fixed-size widths for columns but the item heights can vary wildly. To make a pixel-perfect masonry grid you need a plugin…<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3395],"tags":[3497,510,511],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nCreate Fast Masonry Grid Layouts with Bricks.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Fast Masonry Grid Layouts with Bricks.js\" \/>\n<meta property=\"og:description\" content=\"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-11T13:01:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T08:39:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Create Fast Masonry Grid Layouts with Bricks.js\",\"datePublished\":\"2017-10-11T13:01:02+00:00\",\"dateModified\":\"2018-04-09T08:39:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/\"},\"wordCount\":343,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brickjs-masonry-grid-script\\\/02-repack-grid-masonry-plugin.jpg\",\"keywords\":[\"Javascript Library\",\"Web Designers\",\"Web Developers\"],\"articleSection\":[\"UI\\\/UX\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/\",\"name\":\"Create Fast Masonry Grid Layouts with Bricks.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brickjs-masonry-grid-script\\\/02-repack-grid-masonry-plugin.jpg\",\"datePublished\":\"2017-10-11T13:01:02+00:00\",\"dateModified\":\"2018-04-09T08:39:12+00:00\",\"description\":\"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brickjs-masonry-grid-script\\\/02-repack-grid-masonry-plugin.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/brickjs-masonry-grid-script\\\/02-repack-grid-masonry-plugin.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/brickjs-masonry-grid-script\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Fast Masonry Grid Layouts with Bricks.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Fast Masonry Grid Layouts with Bricks.js - Hongkiat","description":"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/","og_locale":"en_US","og_type":"article","og_title":"Create Fast Masonry Grid Layouts with Bricks.js","og_description":"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,","og_url":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-10-11T13:01:02+00:00","article_modified_time":"2018-04-09T08:39:12+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Create Fast Masonry Grid Layouts with Bricks.js","datePublished":"2017-10-11T13:01:02+00:00","dateModified":"2018-04-09T08:39:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/"},"wordCount":343,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg","keywords":["Javascript Library","Web Designers","Web Developers"],"articleSection":["UI\/UX"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/","url":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/","name":"Create Fast Masonry Grid Layouts with Bricks.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg","datePublished":"2017-10-11T13:01:02+00:00","dateModified":"2018-04-09T08:39:12+00:00","description":"It's always been pretty simple to create grids with jQuery, using plugins and free tutorials from developers. However, masonry grids are tougher to build,","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/brickjs-masonry-grid-script\/02-repack-grid-masonry-plugin.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/brickjs-masonry-grid-script\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Fast Masonry Grid Layouts with Bricks.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9Xt","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=38283"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38283\/revisions"}],"predecessor-version":[{"id":42010,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38283\/revisions\/42010"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38283"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}