muerwre.github.io/css/automatic-grid-like-masonry-with-pure-css/_payload.js

export default (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,_,$,aa,ab,ac,ad,ae){return {data:{navigation:[{title:"Blockchain",_path:"\u002Fblockchain",children:[{title:"Common Typescript Examples",_path:"\u002Fblockchain\u002Fcommon-typescript-examples"},{title:"Smart Contracts",_path:"\u002Fblockchain\u002Fsmart-contracts"}]},{title:"Css",_path:"\u002Fcss",children:[{title:Q,_path:R},{title:"Sass Nth Child Iterate Mixin",_path:"\u002Fcss\u002Fsass-nth-child-iterate-mixin"},{title:"Test If Browser Supports CSS Rules",_path:"\u002Fcss\u002Ftest-if-browser-supports-css-rules"}]},{title:"Docker",_path:"\u002Fdocker",children:[{title:"Building Static Pages With Docker",_path:"\u002Fdocker\u002Fbuilding-static-pages-with-docker"},{title:"Drone Ci",_path:"\u002Fdocker\u002Fdrone-ci"},{title:"Github Pages With Drone Ci",_path:"\u002Fdocker\u002Fgithub-pages-with-drone-ci"},{title:"Private Docker Registry",_path:"\u002Fdocker\u002Fprivate-docker-registry"},{title:"Refresh Containers On Pull",_path:"\u002Fdocker\u002Frefresh-containers-on-pull"},{title:"Seed Dump Inside Docker",_path:"\u002Fdocker\u002Fseed-dump-inside-docker"},{title:"Wait For Mysql",_path:"\u002Fdocker\u002Fwait-for-mysql"},{title:"Wait For Redis",_path:"\u002Fdocker\u002Fwait-for-redis"}]},{title:"Frontend",_path:"\u002Ffrontend",children:[{title:"React Native",_path:"\u002Ffrontend\u002Freact-native",children:[{title:"OAuth2 Login",_path:"\u002Ffrontend\u002Freact-native\u002Foauth2-login"},{title:"Preserve FlatList Scroll Position In React Native",_path:"\u002Ffrontend\u002Freact-native\u002Fpreserve-flatlist-scroll-position-in-react-native"},{title:"Useful Comands",_path:"\u002Ffrontend\u002Freact-native\u002Fuseful-comands"}]},{title:"React",_path:"\u002Ffrontend\u002Freact",children:[{title:"Axios Refresh Token On React",_path:"\u002Ffrontend\u002Freact\u002Faxios-refresh-token-on-react"},{title:"Axios With AbortController",_path:"\u002Ffrontend\u002Freact\u002Faxios-with-abortcontroller"}]},{title:"Vue",_path:"\u002Ffrontend\u002Fvue",children:[{title:"Adding Global Properties To Component",_path:"\u002Ffrontend\u002Fvue\u002Fadding-global-properties-to-component"},{title:"Make Nuxt Handle Obsidian Highlights",_path:"\u002Ffrontend\u002Fvue\u002Fmake-nuxt-handle-obsidian-highlights"}]},{title:"Webgl",_path:"\u002Ffrontend\u002Fwebgl",children:[{title:"Basics Of WebGL (Drawing A Cube)",_path:"\u002Ffrontend\u002Fwebgl\u002Fbasics-of-webgl-(drawing-a-cube)"},{title:"Fragment Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Ffragment-shaders"},{title:"Rendering Without Blocking In A Worker",_path:"\u002Ffrontend\u002Fwebgl\u002Frendering-without-blocking-in-a-worker"},{title:"Vertex Shaders",_path:"\u002Ffrontend\u002Fwebgl\u002Fvertex-shaders"}]}]},{title:"Git",_path:"\u002Fgit",children:[{title:"Force Git To Use HTTPS",_path:"\u002Fgit\u002Fforce-git-to-use-https"},{title:"Git Aliases And Useful Commands",_path:"\u002Fgit\u002Fgit-aliases-and-useful-commands"}]},{title:"Graphql",_path:"\u002Fgraphql",children:[{title:"Apollo Client Pagination",_path:"\u002Fgraphql\u002Fapollo-client-pagination"},{title:"Refresh Token In Apollo Client",_path:"\u002Fgraphql\u002Frefresh-token-in-apollo-client"}]},{title:"Linux",_path:"\u002Flinux",children:[{title:"Gitea For Git Hosting",_path:"\u002Flinux\u002Fgitea-for-git-hosting"},{title:"Google Photos Alternative With Photoprism",_path:"\u002Flinux\u002Fgoogle-photos-alternative-with-photoprism"},{title:"Resume Or Start Screen Session",_path:"\u002Flinux\u002Fresume-or-start-screen-session"},{title:"Rsync File With SSH",_path:"\u002Flinux\u002Frsync-file-with-ssh"},{title:"Setting Up NGINX",_path:"\u002Flinux\u002Fsetting-up-nginx"},{title:"SSH",_path:"\u002Flinux\u002Fssh"}]},{title:"Obsidian",_path:"\u002Fobsidian",children:[{title:"Self Hosted Obsidian Sync With CouchDB",_path:"\u002Fobsidian\u002Fself-hosted-obsidian-sync-with-couchdb"}]},{title:"Sql",_path:"\u002Fsql",children:[{title:"MySQL And MariaDB Setup",_path:"\u002Fsql\u002Fmysql-and-mariadb-setup"},{title:"Postgress Setup",_path:"\u002Fsql\u002Fpostgress-setup"}]},{title:"Typescript",_path:"\u002Ftypescript",children:[{title:"Add Global Variable To Window",_path:"\u002Ftypescript\u002Fadd-global-variable-to-window"},{title:"Flatten Object With Periods",_path:"\u002Ftypescript\u002Fflatten-object-with-periods"},{title:"Type Guards",_path:"\u002Ftypescript\u002Ftype-guards"}]}],"content-query-yoYMujrz1O":{_path:R,_dir:"css",_draft:y,_partial:y,_locale:"en",_empty:y,title:Q,description:z,excerpt:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:A}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:D}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:G}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:c,value:J}]}]}]}]},body:{type:S,children:[{type:a,tag:T,props:{},children:[{type:c,value:z}]},{type:a,tag:g,props:{code:A,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$cell: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"250"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:U},children:[{type:c,value:"$gap: "}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"20"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".grid"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"display"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"grid"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-template-columns"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"repeat"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"auto-fit"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:V},children:[{type:c,value:"minmax"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:W}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:"$cell"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:X}]},{type:a,tag:b,props:{class:"ct-4ea86a"},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:"ct-7e658b"},children:[{type:c,value:"fr"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:"));"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-auto-rows"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"256"}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:K}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-auto-flow"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"row"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:M},children:[{type:c,value:"dense"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-column-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:f},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:t},children:[{type:c,value:"grid-row-gap"}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:w},children:[{type:c,value:Y}]},{type:a,tag:b,props:{class:f},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:B},children:[{type:c,value:C}]},{type:a,tag:g,props:{code:D,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".h-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 columns"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-column-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]},{type:a,tag:b,props:{class:e},children:[]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".v-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:Z}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F takes 2 rows"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:_}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:"grid-row-end"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:b}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:E},children:[{type:c,value:F}]},{type:a,tag:g,props:{code:G,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".full-width"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:N}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height: 1 row"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:j}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:q,props:{id:H},children:[{type:c,value:I}]},{type:a,tag:g,props:{code:J,language:n},children:[{type:a,tag:o,props:{},children:[{type:a,tag:g,props:{__ignoreMap:l},children:[{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:s},children:[{type:c,value:".top-right"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:L}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:$}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:x}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:r},children:[{type:c,value:aa}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:p}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"3"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F height here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:k}]},{type:a,tag:b,props:{class:m},children:[{type:c,value:ab}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:i}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:"-2"}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:ac}]},{type:a,tag:b,props:{class:h},children:[{type:c,value:ad}]},{type:a,tag:b,props:{class:d},children:[{type:c,value:O}]},{type:a,tag:b,props:{class:v},children:[{type:c,value:"\u002F\u002F width here"}]}]},{type:a,tag:b,props:{class:e},children:[{type:a,tag:b,props:{class:d},children:[{type:c,value:u}]}]}]}]}]},{type:a,tag:"style",children:[{type:c,value:".ct-b491f7{color:#8B949E}.ct-250dfe{color:#79C0FF}.ct-7e658b{color:#FF7B72}.ct-4ea86a{color:#79C0FF}.ct-efb0ac{color:#FFA657}.ct-b25f3b{color:#79C0FF}.ct-208d4d{color:#79C0FF}.ct-18e1f7{color:#79C0FF}.ct-c64017{color:#C9D1D9}.ct-01c92a{color:#79C0FF}.ct-55d631{color:#C9D1D9}.ct-0f4ea2{color:#FF7B72}.ct-890380{color:#79C0FF}.ct-c58a18{color:#FFA657}.light .ct-c58a18{color:#657B83}.light .ct-890380{color:#D33682}.light .ct-0f4ea2{color:#859900}.light .ct-55d631{color:#657B83}.light .ct-01c92a{color:#93A1A1}.light .ct-c64017{color:#657B83}.light .ct-18e1f7{color:#859900}.light .ct-208d4d{color:#657B83}.light .ct-b25f3b{color:#268BD2}.light .ct-efb0ac{color:#657B83}.light .ct-4ea86a{color:#D33682}.light .ct-7e658b{color:#859900}.light .ct-250dfe{color:#859900}.light .ct-b491f7{color:#93A1A1}"}]}],toc:{title:l,searchDepth:ae,depth:ae,links:[{id:B,depth:P,text:C},{id:E,depth:P,text:F},{id:H,depth:P,text:I}]}},_type:"markdown",_id:"content:CSS:Automatic Grid like Masonry with pure CSS.md",_source:"content",_file:"CSS\u002FAutomatic Grid like Masonry with pure CSS.md",_extension:"md"}},prerenderedAt:1669556732401}}("element","span","text","ct-55d631","line","ct-c64017","code","ct-890380",": ",";","  ","","ct-250dfe","scss","pre"," ","h3","ct-0f4ea2","ct-01c92a","ct-18e1f7","}","ct-b491f7","ct-efb0ac","1",false,"Grid, that places items by density. Pure #css solution. Can be used with items, that take different amount of rows\u002Fcolumns.","$cell: 250px;\n$gap: 20px;\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax($cell, 1fr));\n  grid-auto-rows: 256px;\n  grid-auto-flow: row dense;\n  grid-column-gap: $gap;\n  grid-row-gap: $gap;\n}\n","basic-elements-with-double-height-or-width","Basic elements with double height or width",".h-2 { \u002F\u002F takes 2 columns\n    grid-column-end: span 2;\n}\n\n.v-2 { \u002F\u002F takes 2 rows\n    grid-row-end: span 2;\n}\n","header-that-fills-all-columns","Header, that fills all columns",".full-width {\n  grid-row: 1 \u002F 2; \u002F\u002F height: 1 row\n  grid-column: 1 \u002F -1;\n}\n","stamp-element-that-takes-3-rows-in-the-top-right-corner","Stamp element, that takes 3 rows in the top right corner",".top-right {\n  grid-row: 1 \u002F 3; \u002F\u002F height here\n  grid-column: -2 \u002F -1; \u002F\u002F width here\n}\n","px"," {","ct-208d4d","2","; ",3,"Automatic Grid Like Masonry With Pure CSS","\u002Fcss\u002Fautomatic-grid-like-masonry-with-pure-css","root","p","ct-c58a18","ct-b25f3b","(",", ","$gap"," { ","    ","grid-row","\u002F","grid-column"," \u002F ","-1",2))