{"id":24547,"date":"2015-08-26T21:01:34","date_gmt":"2015-08-26T13:01:34","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24547"},"modified":"2022-07-17T21:58:04","modified_gmt":"2022-07-17T13:58:04","slug":"jquery-grids","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/","title":{"rendered":"The 10 Most Fascinating jQuery Grids"},"content":{"rendered":"

jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML elements and manipulate the DOM. jQuery is wildly popular, according to the recent stats<\/a> of W3Techs, \u201cjQuery is used by 95.4% of all the websites whose JavaScript library we know.\u201d<\/p>\n

jQuery is also used by many JavaScript libraries as a dependency, and the alpha version of the new major release, jQuery 3.0<\/a> is already out there. If your project uses jQuery in any way and you want a dynamic, flexible layout<\/strong> for your design it\u2019s worth to consider to include a jQuery grid plugin into your frontend stack.<\/p>\n

How Do jQuery Grids Work?<\/h2>\n

jQuery grids let you create Pinterest-like layouts for your site.<\/strong> They work like a virtual matrix, they follow the \u201cbox inside a box\u201d principle. jQuery grids dynamically calculate what is the best arrangement of items and populate the page with them in a way that leaves the least blank space, something like what you see in these boxes here.<\/p>\n

\"Boxes<\/figure>\n

The main advantage of jQuery grids compared to CSS grids is that they work with images or other media elements that have different widths and heights. Cool JavaScript effects are also a big reason to use jQuery grids to create a modern layout.<\/p>\n

In this post you can read about the 10 most fascinating jQuery grids<\/strong> that are currently out on the market \u2013 of course, just like jQuery, all of them are open-source and free.<\/p>\n

1. jQuery Nested<\/a><\/h2>\n

jQuery Nested<\/strong> provides you with a handy multi-column grid layout that is responsive<\/strong> and works across all kinds of devices. This jQuery plugin advertises itself as completely gap-free. At first this slogan may sound like a cheap marketing trick but the plugin actually accomplishes gap-freedom very nicely, just as its creators promised.<\/p>\n

jQuery Nested follows a unique script in populating the grid matrix<\/strong>. First it creates a multi column grid, then it scans the matrix for gaps and fills them by reordering the different elements. Finally \u2013 and that is the step that makes this grid gapless \u2013 it resizes any element in the bottom row that doesn\u2019t properly fit in the gap.<\/p>\n

\"jQuery<\/figure>\n

2. Freewall<\/a><\/h2>\n

Freewall<\/strong> allows you to create the layout you want whether it is an image grid, a nested grid, a masonry or a metro-style grid. It has many options that you can set as JavaScript variables such as gutterX, gutterY, animate, cellW, cellH<\/strong>, etc. It has custom events such as onGapFound<\/strong> and onResize<\/strong>, and custom methods as well.<\/p>\n

\"Freewall\"<\/figure>\n

You can find nice code examples on their website. The devs also cared about the poor souls who still have to design for older browsers, so Freewall supports Internet Explorer 8,<\/strong> and it also has a solution for disabled JavaScript<\/strong>, as it uses CSS 3 animations as a JS fallback strategy<\/strong>. Check out our article on Freewall here<\/a>.<\/p>\n

3. Masonry<\/a><\/h2>\n

The name of the good old Masonry<\/strong> must be familiar to the ears of every experienced designer. In case you haven\u2019t heard of it, Masonry is a cascading grid layout library<\/strong> that works with both jQuery and vanilla JavaScript.<\/p>\n

This handy plugin is the base of many popular WordPress themes. You don\u2019t even have to upload it to your server as you can easily link the library directly from a CDN.<\/p>\n

<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/masonry\/3.3.1\/masonry.pkgd.js\"><\/script><\/pre>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/masonry\/3.3.1\/masonry.pkgd.min.js\"><\/pre>\n
Masonry is probably the best-established jQuery grid out there, and that\u2019s why it has many options. You can easily install it with Bower<\/a> or Node Package Manager. You can achieve different grid layouts<\/a> with its help and you can set many custom variables<\/a>, methods<\/a> and events<\/a> too.<\/p>\n
\"Masonry<\/figure>\n
Image: Tumblr Staff Archive (Made with the Masonry plugin)<\/a><\/small><\/p>\n
4. Gridify<\/a><\/h2>\n
Gridify<\/strong> is a lightweight JavaScript plugin that you not only use with jQuery but also with pure JavaScript. The page mentions that it can be used with the YUI library too, but as the development of YUI has been discontinued<\/a>, it\u2019s not an option any more.<\/p>\n
Gridify \u201cgridifies\u201d your layout in a Pinterest-like way. It supports loaded events, calculates item widths dynamically<\/strong>, it handles items with very long heights and makes animations via CSS 3 transitions<\/strong> possible.<\/p>\n
Since the latest version you can also use Gridify together with the Require JS<\/a> JavaScript file and module loader.<\/p>\n
5. Shapeshift<\/a><\/h2>\n
Shapeshift is a really cool drag-and-drop jQuery grid system<\/strong>. The user can drag and drop an element throughout the page, and Shapeshift reorganizes the elements into a new position every time an item is moved around<\/strong>.<\/p>\n
The dragging event changes the index position of the elements within their parent container. This way Spaceshift doesn\u2019t screw up the logical indexing system of the child elements<\/strong>. Seriously, try it out on their demo website, it works wonderfully.<\/p>\n
\"Shapeshift\"<\/figure>\n
6. jQuery Portfolio<\/a><\/h2>\n
The jQuery Portfolio<\/strong> plugin is a great choice if you want to design a stylish portfolio site. The author originally designed it for his own portfolio site but later made it an open-source project.<\/p>\n
\"jQuery<\/figure>\n
You can set the number<\/strong> of columns in the grid and the desired jQuery transition effect<\/strong>. The jQuery Portfolio plugin is responsive as well so you don\u2019t have to worry about the user experience of your visitors using a mobile device.<\/p>\n
7. jQuery MatchHeight<\/a><\/h2>\n
The jQuery MatchHeigh<\/strong>t plugin allows you to use a special jQuery grid that makes the height of all selected elements exactly equal<\/strong>. MatchHeight automatically matches the height of elements in the same group, and smartly handles floating elements and wrapping<\/strong>. You can use this plugin for placing items in lovely straight rows.<\/p>\n
\"jQuery<\/figure>\n
You can either use a maximum height as a benchmark or define a specific target element and MatchHeight will make sure that other elements won\u2019t be larger than that<\/strong>. It also has a Data API that enables you to use data attributes<\/a> inside the inline <script><\/strong> tags in your HTML 5 files.<\/p>\n
8. Photoset Grid<\/a><\/h2>\n
Do you like Tumblr\u2019s Photoset<\/a> feature? Then the Photoset Grid<\/strong> jQuery plugin was designed for you. This handy frontend tool arranges images into a flexible grid based on the aforementioned photoset feature<\/strong>. The original version of the plugin was created for Tumblr themes but the dev team decided to give the opportunity for designers to use this plugin in their own designs.<\/p>\n
\"Photoset<\/figure>\n
If you want to add Photoset Grid<\/strong> to your own Tumblr theme, they have a custom code snippet<\/a> you can embed in your code. Probably the coolest feature of this plugin is the possibility of adding a Lightbox to the image grid<\/strong>. You can try it out here<\/a> by clicking on one the photos.<\/p>\n
9. Shuffle<\/a><\/h2>\n
Have you ever wanted a flexible image grid that enables you to categorize, sort and filter the items<\/strong>? If yes, you definitely need to try out Shuffle<\/strong>. The result of this plugin is really beautiful, especially because it has a cool shuffle effect on page load.<\/p>\n
\"Shuffle\"<\/figure>\n
Items can be added to multiple groups and later the user can filter them by groups<\/strong>, so it makes a great user experience. The plugin adds subtle captions<\/strong> to the images that lists the categories the item belongs to. You can set many options with the help of JavaScript variables<\/strong> such as the speed of the shuffle effect, the width of the gutters, the width of the columns, and many other.<\/p>\n
10. jQuery Gridly<\/a><\/h2>\n
jQuery Gridly<\/strong> is a smart choice for anyone who wants to implement grid-based layouts on touch-enabled devices<\/strong>. This plugin allows users to drag and drop items around the screen. Both the drag-and-drop and the resize features react to touchscreen gestures too<\/strong>.<\/p>\n
\"jQuery<\/figure>\n
Users can close the images they don\u2019t like and after an image is closed the layout is rearranged<\/strong> following by a cool effect. It\u2019s easy to integrate jQuery Gridly with Ruby on Rails apps as it\u2019s also registered as a Rails Asset<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"
jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML elements and manipulate the DOM. jQuery is wildly popular, according to the recent stats of W3Techs, \u201cjQuery is used by 95.4% of all the websites whose JavaScript library…<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[911],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nThe 10 Most Fascinating jQuery Grids - Hongkiat<\/title>\n<meta name=\"description\" content=\"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML\" \/>\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\/jquery-grids\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The 10 Most Fascinating jQuery Grids\" \/>\n<meta property=\"og:description\" content=\"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/\" \/>\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=\"2015-08-26T13:01:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-17T13:58:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\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=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"The 10 Most Fascinating jQuery Grids\",\"datePublished\":\"2015-08-26T13:01:34+00:00\",\"dateModified\":\"2022-07-17T13:58:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/\"},\"wordCount\":1305,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-grids\\\/boxes-in-a-box.jpg\",\"keywords\":[\"jQuery\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/\",\"name\":\"The 10 Most Fascinating jQuery Grids - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-grids\\\/boxes-in-a-box.jpg\",\"datePublished\":\"2015-08-26T13:01:34+00:00\",\"dateModified\":\"2022-07-17T13:58:04+00:00\",\"description\":\"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-grids\\\/boxes-in-a-box.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/jquery-grids\\\/boxes-in-a-box.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/jquery-grids\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The 10 Most Fascinating jQuery Grids\"}]},{\"@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\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The 10 Most Fascinating jQuery Grids - Hongkiat","description":"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML","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\/jquery-grids\/","og_locale":"en_US","og_type":"article","og_title":"The 10 Most Fascinating jQuery Grids","og_description":"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML","og_url":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-08-26T13:01:34+00:00","article_modified_time":"2022-07-17T13:58:04+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"The 10 Most Fascinating jQuery Grids","datePublished":"2015-08-26T13:01:34+00:00","dateModified":"2022-07-17T13:58:04+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/"},"wordCount":1305,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg","keywords":["jQuery"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/","url":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/","name":"The 10 Most Fascinating jQuery Grids - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg","datePublished":"2015-08-26T13:01:34+00:00","dateModified":"2022-07-17T13:58:04+00:00","description":"jQuery is usually the first choice for most people who want to dip their feet in JavaScript programming as it provides an easy method to select HTML","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/jquery-grids\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/jquery-grids\/boxes-in-a-box.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/jquery-grids\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The 10 Most Fascinating jQuery Grids"}]},{"@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\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6nV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24547","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\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24547"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24547\/revisions"}],"predecessor-version":[{"id":54034,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24547\/revisions\/54034"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24547"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24547"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}