{"id":3725,"date":"2020-04-30T10:17:01","date_gmt":"2020-04-30T09:17:01","guid":{"rendered":"https:\/\/solidt.eu\/site\/?p=3725"},"modified":"2020-04-30T10:22:10","modified_gmt":"2020-04-30T09:22:10","slug":"css-old-style-floating-grid","status":"publish","type":"post","link":"https:\/\/solidt.eu\/site\/css-old-style-floating-grid\/","title":{"rendered":"CSS old-style floating grid"},"content":{"rendered":"\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.row > .col {\n\tfloat:left;\n\tclear:none;            \n\tbox-sizing:border-box;\n\tpadding:10px;\n\t\n\t\/* OPTIONAL *\/\n\tbackground-color:#ccc;  \n\toverflow:hidden;\n\ttext-align:center;\n}\n\n\/* for displaying purposes *\/\n.col::before {\n\tcontent: \" \";\n\tborder:1px solid red;\n\tdisplay:block;\n\theight:30px;\n}\n\n.span1  { width: 8.33333%; }    \n.span1-8  { width: 12.5%; } \n.span2  { width: 16.66667%; }    \n.span2-5 { width: 20%; }   \n.span3  { width: 25.0%; }    \n.span4  { width: 33.33334%; }    \n.span5  { width: 41.66665%; }    \n.span6  { width: 50.0%; }    \n.span7  { width: 58.33331%; }    \n.span8  { width: 66.66664%; }    \n.span9  { width: 75.0%; } \n.span10 { width: 83.33333%; }    \n.span11 { width: 91.66663%; }    \n.span12 { width: 100.0%; }<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"row\">\n\t&lt;div class=\"col span12\">1&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span6\">1&lt;\/div>\n\t&lt;div class=\"col span6\">2&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span4\">1&lt;\/div>\n\t&lt;div class=\"col span4\">2&lt;\/div>\n    &lt;div class=\"col span4\">3&lt;\/div> \n&lt;\/div>\n  \n&lt;div class=\"row\">\n\t&lt;div class=\"col span3\">1&lt;\/div>\n\t&lt;div class=\"col span3\">2&lt;\/div>\n\t&lt;div class=\"col span3\">3&lt;\/div>\n\t&lt;div class=\"col span3\">4&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span2-5\">1&lt;\/div>\n\t&lt;div class=\"col span2-5\">2&lt;\/div>\n\t&lt;div class=\"col span2-5\">3&lt;\/div>\n\t&lt;div class=\"col span2-5\">4&lt;\/div>\n\t&lt;div class=\"col span2-5\">5&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span2\">1&lt;\/div>\n\t&lt;div class=\"col span2\">2&lt;\/div>\n\t&lt;div class=\"col span2\">3&lt;\/div>\n\t&lt;div class=\"col span2\">4&lt;\/div>\n\t&lt;div class=\"col span2\">5&lt;\/div>\n\t&lt;div class=\"col span2\">6&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span1\">1&lt;\/div>\n\t&lt;div class=\"col span2\">2&lt;\/div>\n\t&lt;div class=\"col span2\">3&lt;\/div>\n\t&lt;div class=\"col span2\">4&lt;\/div>\n\t&lt;div class=\"col span2\">5&lt;\/div>\n\t&lt;div class=\"col span2\">6&lt;\/div>\n\t&lt;div class=\"col span1\">7&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span1-8\">1&lt;\/div>\n\t&lt;div class=\"col span1-8\">2&lt;\/div>\n\t&lt;div class=\"col span1-8\">3&lt;\/div>\n\t&lt;div class=\"col span1-8\">4&lt;\/div>\n\t&lt;div class=\"col span1-8\">5&lt;\/div>\n\t&lt;div class=\"col span1-8\">6&lt;\/div>\n\t&lt;div class=\"col span1-8\">7&lt;\/div>\n\t&lt;div class=\"col span1-8\">8&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span1\">1&lt;\/div>\n\t&lt;div class=\"col span1\">2&lt;\/div>\n\t&lt;div class=\"col span1\">3&lt;\/div>\n\t&lt;div class=\"col span1\">4&lt;\/div>\n\t&lt;div class=\"col span1\">5&lt;\/div>\n\t&lt;div class=\"col span1\">6&lt;\/div>\n\t&lt;div class=\"col span1\">7&lt;\/div>\n\t&lt;div class=\"col span1\">8&lt;\/div>\n\t&lt;div class=\"col span1\">9&lt;\/div>\n\t&lt;div class=\"col span1\">10&lt;\/div>\n\t&lt;div class=\"col span1\">11&lt;\/div>\n\t&lt;div class=\"col span1\">12&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span4\">1&lt;\/div>\n\t&lt;div class=\"col span8\">2&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span3\">1&lt;\/div>\n\t&lt;div class=\"col span9\">2&lt;\/div>\n&lt;\/div>\n\n&lt;div class=\"row\">\n\t&lt;div class=\"col span2\">1&lt;\/div>\n\t&lt;div class=\"col span10\">2&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"484\" height=\"841\" src=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/04\/afbeelding.png\" alt=\"\" class=\"wp-image-3726\" srcset=\"https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/04\/afbeelding.png 484w, https:\/\/solidt.eu\/site\/wp-content\/uploads\/2020\/04\/afbeelding-173x300.png 173w\" sizes=\"auto, (max-width: 484px) 100vw, 484px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3725","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/comments?post=3725"}],"version-history":[{"count":3,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3725\/revisions"}],"predecessor-version":[{"id":3730,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/posts\/3725\/revisions\/3730"}],"wp:attachment":[{"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/media?parent=3725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/categories?post=3725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solidt.eu\/site\/wp-json\/wp\/v2\/tags?post=3725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}