{"id":12160,"date":"2022-09-29T21:27:07","date_gmt":"2022-09-29T15:57:07","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/"},"modified":"2022-09-29T21:27:07","modified_gmt":"2022-09-29T15:57:07","slug":"solved-how-to-create-this-layout-using-css","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/","title":{"rendered":"[Solved] How to create this layout using CSS"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-29630776\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"29630776\" data-parentid=\"29629771\" data-score=\"3\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You can use <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/CSS\/Using_multi-column_layouts\">CSS3 multi-column layouts<\/a>. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. <strong><em>However note that (i) the content displays from top to bottom, left to right (ii) <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/caniuse.com\/#feat=multicolumn\">the browser support is limited at the moment<\/a>.<\/em><\/strong><\/p>\n<\/p>\n<div class=\"snippet\" data-lang=\"js\" data-hide=\"false\">\n<div class=\"snippet-code\">\n<pre class=\"snippet-code-js lang-js prettyprint-override\"><code>$(\"#button1\").on(\"click\", function() {\r\n  $(\"#container &gt; div\").height(function() {\r\n    return Math.floor(Math.random() * 300);\r\n  });\r\n});<\/code><\/pre>\n<pre class=\"snippet-code-css lang-css prettyprint-override\"><code>#container {\r\n  -webkit-column-count: 3;\r\n  -moz-column-count: 3;\r\n  column-count: 3;\r\n  -webkit-column-gap: 1em;\r\n  -moz-column-gap: 1em;\r\n  column-gap: 1em;\r\n}\r\n#container &gt; div {\r\n  -webkit-column-break-inside: avoid;\r\n  page-break-inside: avoid;\r\n  break-inside: avoid;\r\n  min-height: 100px;\r\n  border-bottom: 1em solid white;\r\n  background-color: powderblue;\r\n}\r\n#button1 {\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n}<\/code><\/pre>\n<pre class=\"snippet-code-html lang-html prettyprint-override\"><code>&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.9.1\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;div id=\"container\"&gt;\r\n  &lt;div&gt;1&lt;\/div&gt;\r\n  &lt;div&gt;2&lt;\/div&gt;\r\n  &lt;div&gt;3&lt;\/div&gt;\r\n  &lt;div&gt;4&lt;\/div&gt;\r\n  &lt;div&gt;5&lt;\/div&gt;\r\n  &lt;div&gt;6&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;input id=\"button1\" type=\"button\" value=\"Randomize box sizes\"&gt;<\/code><\/pre>\n<\/div>\n<\/div>\n<p>Regarding screen sizes: you can use CSS media queries to control the number of columns. For example you could choose to show 4 columns on 1000px+, 3 columns on 800px+ and two columns on smaller screens.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">1<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved How to create this layout using CSS <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You can use CSS3 multi-column layouts. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. However note that (i) the content displays from top to bottom, left to right (ii) the browser support is limited at the moment. $(&#8220;#button1&#8221;).on(&#8220;click&#8221;, function() { $(&#8220;#container &gt; div&#8221;).height(function() &#8230; <a title=\"[Solved] How to create this layout using CSS\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\" aria-label=\"More on [Solved] How to create this layout using CSS\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346,333,3315],"class_list":["post-12160","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html","tag-javascript","tag-semantic-ui"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] How to create this layout using CSS - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] How to create this layout using CSS - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You can use CSS3 multi-column layouts. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. However note that (i) the content displays from top to bottom, left to right (ii) the browser support is limited at the moment. $(&quot;#button1&quot;).on(&quot;click&quot;, function() { $(&quot;#container &gt; div&quot;).height(function() ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-29T15:57:07+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] How to create this layout using CSS\",\"datePublished\":\"2022-09-29T15:57:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\"},\"wordCount\":101,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\",\"javascript\",\"semantic-ui\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\",\"name\":\"[Solved] How to create this layout using CSS - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-09-29T15:57:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] How to create this layout using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] How to create this layout using CSS - JassWeb","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:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] How to create this layout using CSS - JassWeb","og_description":"[ad_1] You can use CSS3 multi-column layouts. The content is distributed inside columns like a newspaper. Browsers distribute content so that all columns are same(ish) height. However note that (i) the content displays from top to bottom, left to right (ii) the browser support is limited at the moment. $(\"#button1\").on(\"click\", function() { $(\"#container &gt; div\").height(function() ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/","og_site_name":"JassWeb","article_published_time":"2022-09-29T15:57:07+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] How to create this layout using CSS","datePublished":"2022-09-29T15:57:07+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/"},"wordCount":101,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html","javascript","semantic-ui"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/","name":"[Solved] How to create this layout using CSS - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-09-29T15:57:07+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-create-this-layout-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] How to create this layout using CSS"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=12160"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/12160\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=12160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=12160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=12160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}