{"id":15145,"date":"2012-10-05T18:01:29","date_gmt":"2012-10-05T10:01:29","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15145"},"modified":"2025-04-24T17:18:21","modified_gmt":"2025-04-24T09:18:21","slug":"css3-multi-columns","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/","title":{"rendered":"Create Multiple Columns Layout (Magazine-alike) With CSS3"},"content":{"rendered":"<p>In general, people lose track when reading extremely long content. That is why, in print media like <a href=\"https:\/\/www.hongkiat.com\/blog\/42-free-online-magazines-for-designers\/\">magazines<\/a> and newspapers, the content is divided into multiple columns for easy reading.<\/p>\n<p>Creating columns on the Web is a totally different story. It used to be quite difficult. In fact, not too long ago, you might have needed to divide the content manually into several <code>div<\/code> elements, float them to the right or left, and then specify the width, padding, margin, borders, etc.<\/p>\n<p>But things are now much simplified with the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/css3-multicol\/\">CSS3 Multi Column Module<\/a><\/strong>. As the name clearly implies, this module allows us to divide content into the columned layout we often see in newspapers or magazines.<\/p>\n<h2>Browser Support<\/h2>\n<p>Multiple columns are currently supported in all major browsers \u2013 Firefox 2+, Chrome 4+, Safari 3.1+, and Opera 11.1+ \u2013 except Internet Explorer, although IE10 started providing support for this module.<\/p>\n<p>For the other browsers, Firefox still requires the <code>-moz-<\/code> prefix for it to work, while Chrome and Safari need the <code>-webkit-<\/code> prefix. Opera doesn\u2019t require any prefixes, so we can just use the official properties.<\/p>\n<p><em><strong>Source:<\/strong> <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/caniuse.com\/multicolumn\">When can I use CSS3 Multiple column layout?<\/a><\/em><\/p>\n<h2>Create Multiple Columns<\/h2>\n<p>Before we create the columns, we have prepared some text paragraphs for the demonstration, wrapped inside the <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/series-html5-css3-tuts\/\">HTML5<\/a> <code>&lt;article&gt;<\/code> tag, as follows:<\/p>\n<pre>\n&lt;article&gt;\n  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,\n  rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.\n  Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit\n  amet tincidunt orci placerat in. Integer vitae consequat augue.\n\n  \/\/and so on\n&lt;\/article&gt;\n<\/pre>\n<p>\u2026and specified a width of <code>600px<\/code> in the stylesheet.<\/p>\n<p>Now, let\u2019s start creating the columns.<\/p>\n<p>In the example below, we will divide the content into <strong>two columns<\/strong> using the <code>column-count<\/code> property. This property tells the browser to render the content into the specified number of columns, letting the browser decide the appropriate width for each column.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg\" width=\"500\" alt=\"Two-column CSS layout example\"><\/figure>\n<pre>\narticle {\n  -webkit-column-count: 2;\n  -moz-column-count: 2;\n  column-count: 2;\n}\n<\/pre>\n<p>Apart from being defined by the count, columns can be created by specifying the width using the <code>column-width<\/code> property, letting the browser decide how many columns should be generated in place.<\/p>\n<p>In this example, we specify a column width of <code>150px<\/code>, which results in the content being divided into three columns.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-3.jpg\" width=\"500\" alt=\"Three-column CSS layout width\"><\/figure>\n<pre>\narticle {\n  -moz-column-width: 150px;\n  -webkit-column-width: 150px;\n  column-width: 150px;\n}\n<\/pre>\n<p>As stated in the specification, the actual width of the column may be wider or narrower than the specified column width, depending on the available space. Also, if the width value is not explicitly specified, \u201cauto\u201d will be taken as the default, which could also mean \u201cno columns\u201d.<\/p>\n<h3>Column Gap<\/h3>\n<p><strong>Column Gap<\/strong> defines the space that separates each column. The gap value can be stated in <code>em<\/code> or <code>px<\/code>, but as stated in the specification, <strong>the value cannot be negative<\/strong>. In the example below, we specify a gap of <code>30px<\/code>, so the spaces between the columns look a little wider.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-4.jpg\" width=\"500\" alt=\"CSS column gap example\"><\/figure>\n<pre>\narticle {\n  -webkit-column-gap: 30px;\n  -moz-column-gap: 30px;\n  column-gap: 30px;\n}\n<\/pre>\n<h3>Column Rule<\/h3>\n<p>Should you want to add borders between the columns, you can use the <code>column-rule<\/code> property, which works very similarly to the <code>border<\/code> property. So, let\u2019s say, if we want to put a dotted border between the columns, we can write:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-border.jpg\" width=\"500\" alt=\"CSS column rule border\"><\/figure>\n<pre>\narticle {\n  -moz-column-rule: 1px dotted #ccc;\n  -webkit-column-rule: 1px dotted #ccc;\n  column-rule: 1px dotted #ccc;\n}\n<\/pre>\n<h3>Column Span<\/h3>\n<p>This property works quite similarly to the <code>colspan<\/code> attribute in the <code>table<\/code> tag. The common implementation of this property is to span the content headline across all columns. Here is an example:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" height=\"300\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-span.jpg\" width=\"500\" alt=\"CSS column span example\"><\/figure>\n<pre>\narticle h1 {\n  -webkit-column-span: all;\n  column-span: all;\n}\n<\/pre>\n<p>In the example above, we defined the <code>h1<\/code> to span across all columns. If the column span is <strong>not<\/strong> specified, <code>1<\/code> will be taken as the default. Unfortunately, at the time of this writing, this property only works in Opera and Chrome.<\/p>\n<h2>Final Words<\/h2>\n<p>That\u2019s all for now; we have covered the essential techniques for creating multiple columns with CSS3. As we mentioned at the beginning, this module works very well in modern browsers but doesn\u2019t work in older versions of Internet Explorer.<\/p>\n<div class=\"button\">\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/hongkiat.github.io\/css3-multi-columns\/\">Demo<\/a>\n  <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/css3-multi-columns\/\">Download Source<\/a>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into multiple columns for easy reading. Creating columns on the Web is a totally different story. It used to be quite difficult. In fact, not too long ago, you might have&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[507,506,2016,4657],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Multiple Columns Layout (Magazine-alike) With CSS3 - Hongkiat<\/title>\n<meta name=\"description\" content=\"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into\" \/>\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\/css3-multi-columns\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Multiple Columns Layout (Magazine-alike) With CSS3\" \/>\n<meta property=\"og:description\" content=\"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/\" \/>\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=\"2012-10-05T10:01:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:18:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Create Multiple Columns Layout (Magazine-alike) With CSS3\",\"datePublished\":\"2012-10-05T10:01:29+00:00\",\"dateModified\":\"2025-04-24T09:18:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/\"},\"wordCount\":576,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-multi-columns\\\/column-2.jpg\",\"keywords\":[\"CSS\",\"HTML\",\"HTML5 \\\/ CSS3 Tutorials\",\"Magazine Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/\",\"name\":\"Create Multiple Columns Layout (Magazine-alike) With CSS3 - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-multi-columns\\\/column-2.jpg\",\"datePublished\":\"2012-10-05T10:01:29+00:00\",\"dateModified\":\"2025-04-24T09:18:21+00:00\",\"description\":\"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-multi-columns\\\/column-2.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css3-multi-columns\\\/column-2.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css3-multi-columns\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Multiple Columns Layout (Magazine-alike) With CSS3\"}]},{\"@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\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Multiple Columns Layout (Magazine-alike) With CSS3 - Hongkiat","description":"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into","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\/css3-multi-columns\/","og_locale":"en_US","og_type":"article","og_title":"Create Multiple Columns Layout (Magazine-alike) With CSS3","og_description":"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into","og_url":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-05T10:01:29+00:00","article_modified_time":"2025-04-24T09:18:21+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Create Multiple Columns Layout (Magazine-alike) With CSS3","datePublished":"2012-10-05T10:01:29+00:00","dateModified":"2025-04-24T09:18:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/"},"wordCount":576,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg","keywords":["CSS","HTML","HTML5 \/ CSS3 Tutorials","Magazine Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/","url":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/","name":"Create Multiple Columns Layout (Magazine-alike) With CSS3 - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg","datePublished":"2012-10-05T10:01:29+00:00","dateModified":"2025-04-24T09:18:21+00:00","description":"In general, people lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css3-multi-columns\/column-2.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css3-multi-columns\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Multiple Columns Layout (Magazine-alike) With CSS3"}]},{"@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\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3Wh","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15145","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\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15145"}],"version-history":[{"count":5,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15145\/revisions"}],"predecessor-version":[{"id":74120,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15145\/revisions\/74120"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15145"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}