{"id":4129,"date":"2018-02-22T17:32:20","date_gmt":"2018-02-22T17:32:20","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=4129"},"modified":"2022-03-22T18:57:25","modified_gmt":"2022-03-22T18:57:25","slug":"05-css3-multicolumn-layout","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/05-css3-multicolumn-layout\/","title":{"rendered":"05 CSS3 Multicolumn Layout"},"content":{"rendered":"<style>\niframe {width: 100%; height: 600px;}\n<\/style>\n<p>CSS2.1 provided basic layout modes, from inline and block and tables to positioned layout, which is either based on normal flow or a relative position from that flow, or absolute and fixed positioning, which avoids the flow all together. Add floats and the ability to change the display mode of objects, and that was what designers had to create their pages.<br \/>\nCSS3 adds a number of layout modules, but most are still in the process. Check the <a href=\"http:\/\/caniuse.com\">Can I Use?<\/a> website and make sure the properties are well supported before using. Some of these layout strategies are <a href=\"http:\/\/www.interoperabilitybridges.com\/css3-floats\/OriginalSubmition.html\">Positioned Floats<\/a>, <a href=\"http:\/\/dev.w3.org\/csswg\/css3-exclusions\/\">Exclusions<\/a>, <a href=\"http:\/\/www.interoperabilitybridges.com\/css3-grid-align\/\">Grid Alignment<\/a>\/<a href=\"http:\/\/www.w3.org\/TR\/2007\/WD-css3-grid-20070905\/\">Grid Layout<\/a>, <a href=\"http:\/\/www.w3.org\/TR\/css3-layout\/\">Template Layout Module<\/a> and <a href=\"http:\/\/labs.adobe.com\/technologies\/cssregions\/\">Regions<\/a>, which has recently been proposed by Adobe. These new CSS modules will significantly change the Layout and Design landscape for the better.  <\/p>\n<h2>CSS3 Multiple Column Layout <\/h2>\n<p><iframe src=\"http:\/\/caniuse.com\/multicolumn\/embed\/eras=-3,2\"><\/iframe>\n<\/p>\n<p>This property is mostly supported with the exception of the break before, break inside and break after properties. Mozilla is not able to span columns and it is not supported on the older IE browsers, most significantly, IE 9.\n<\/p>\n<p>It is easy enough to create multi-column layouts using the new CSS3 <a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/\">multiple columns<\/a> property. The document flow runs though any number of columns inside a box. In the demo, you can change the property to show a number of columns, depending on the size of the screen. A good use of multiple columns is in <a href=\"08-media-queries\/\">media queries<\/a>, where small screens get one column, tablets get two and computer monitors get three columns.<\/p>\n<h2>Multi-Columns Interactive<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n#multi {\r\n-webkit-columns: 2;  -moz-columns: 2; \r\n\/*12em *\/\r\n\/* # of columns or width*\/\r\n-webkit-column-gap: 2em; -moz-column-gap: 2em;\r\n-webkit-column-rule-width: thin; -moz-column-rule-width: thin;\r\n\/*thin, thick*\/\r\n-webkit-column-rule-style: solid; -moz-column-rule-style: solid;\r\n\/*none, solid, etc*\/\r\n-webkit-column-rule-color: black; -moz-column-rule-color: black;\r\n}\r\n#multi h1 {\r\ntext-align: center;\r\nfont-size: 3em;\r\n-webkit-column-span: all; -moz-column-span: all;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\"  id=\"multi\" >\n<h3>Live Demo<\/h3>\n<h1>What is \u201cFun?\u201d<\/h1>\n<p>\u201cI\u2019ll know it when I see it.\u201d\n<\/p>\n<p>As designers, we get a lot of similarly elusive adjectives from clients, as they tell us what they want their sites to be: \u201cThe site needs to be \u2018cool,\u2019\u201d \u201cIt should be \u2018exciting,\u2019\u201d \u201cI want it to \u2018pop.\u2019\u201d When we ask them to clarify, the answer we get back sounds a lot like \u201cI can\u2019t tell you what it is, but I\u2019ll know it when I see it.\u201d\n<\/p>\n<p>\u201cFun\u201d is a particularly difficult concept to define. And we\u2019re starting to hear it a lot more from clients as we design for different contexts of use.\n<\/p>\n<p>So what\u2019s a designer to do?\n<\/p>\n<\/div>\n<h2>Flexible Box Layout Module<\/h2>\n<\/p>\n<p>Where multiple columns is a one trick pony for layout, flex box is a serious problem solver. It automatically adjusts boxes to fit horizontally or vertically. It is almost ready for prime time. There are issues with Webkit but time will iron this out.<br \/>\n<iframe src=\"http:\/\/caniuse.com\/flexbox\/embed\/eras=-3,2&#038;description&#038;links\"><\/iframe><br \/>\nFlexbox is a module. That means it relies on a relationship, in this case, of a parent box and sibling boxes.  Flex controls how the children behave as they align along the two axis. Depending on the direction, the main axis is horizontal or row, and the secondary axis is perpendicular to that.<br \/>\n<img decoding=\"async\" alt=\"flex axis demonstration\" src=\"http:\/\/b.parsons.edu\/~dejongo\/12-fall\/stuff\/09-flex-axis-demonstration.png\" \/><\/p>\n<h2>Flex-Box Interactive<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n.demo {\r\nwidth:90%;\r\nmargin-bottom:1em;\r\nbackground:rgba(147,128,108,.1);\r\nborder-radius:3px;\r\npadding:.8em 1em 0;\r\n}\r\n.aligner {\r\ndisplay:flex;\r\n-webkit-box-align:center;\r\n-webkit-align-items:center;\r\n-moz-box-align:center;\r\n-ms-flex-align:center;\r\nalign-items:center;\r\n-webkit-box-pack:center;\r\n-webkit-justify-content:center;\r\n-moz-box-pack:center;\r\n-ms-flex-pack:center;\r\njustify-content:center;\r\nheight:14em;\r\n}\r\n.aligner-item {\r\nmax-width:50%;\r\n}\r\n.demo-title {\r\nmargin-bottom:.25rem;\r\nfont-size:1em;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\"  id=\"flex\" >\n<h3>Live Demo<\/h3>\n<div class=\"demo aligner\">\n<div class=\"demo aligner-item\">\n<h2 class=\"demo-title\">I&#8217;m Centered!<\/h2>\n<p contenteditable=\"true\">This box is both vertically and horizontally centered. Even if the text in this box changes to make it wider or taller, the box will still be centered. Go ahead, give it a try. Just click to edit the text.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2>Flex-Box Interactive<\/h2>\n<div class=\"handson_demo\">\n<h3>CSS Code View<\/h3>\n<pre>\r\n<style contenteditable=\"true\">\r\n.flex-container {\r\ndisplay: -webkit-flex;\r\ndisplay: -moz-flex;\r\ndisplay: flex;\r\n\/* row, row-reverse, column, column-reverse *\/\r\n-webkit-flex-flow: row-reverse wrap;\r\n-moz-flex-flow: row-reverse wrap;\r\nflex-flow: row-reverse wrap;\r\n\/* nowrap, wrap, wrap-reverse*\/\r\n-webkit-justify-content: center;\r\n-moz-justify-content: center;\r\njustify-content:center;\r\n\/* flex-start, flex-end, center, space-between, space-around *\/}\r\n\r\n.flex-item {\r\n-webkit-flex: initial;\r\n-moz-flex: initial;\r\nflex: initial;\r\npadding: 30px;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\"  id=\"flex2\" >\n<figure class=\"flex-container\">\n<div style=\"background: hsla(0,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">Lorem ipsum<\/span><\/div>\n<div style=\"background: hsla(20,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">dolor<\/span><\/div>\n<div style=\"background: hsla(40,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">sit<\/span><\/div>\n<div style=\"background: hsla(60,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">amet<\/span><\/div>\n<div style=\"background: hsla(80,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">consectetur<\/span><\/div>\n<div style=\"background: hsla(100,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">adipiscing elit<\/span><\/div>\n<div style=\"background: hsla(120,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">nunc<\/span><\/div>\n<div style=\"background: hsla(140,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">enim<\/span><\/div>\n<div style=\"background: hsla(160,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">nunc<\/span><\/div>\n<div style=\"background: hsla(180,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">volutpat eget<\/span><\/div>\n<div style=\"background: hsla(200,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">aliquam<\/span><\/div>\n<div style=\"background: hsla(220,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">nec<\/span><\/div>\n<div style=\"background: hsla(240,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">accumsan rutrum<\/span><\/div>\n<div style=\"background: hsla(260,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">bacon<\/span><\/div>\n<div style=\"background: hsla(280,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">maecenas<\/span>a<\/div>\n<div style=\"background: hsla(300,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">nunc<\/span><\/div>\n<div style=\"background: hsla(320,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">voldermere<\/span><\/div>\n<div style=\"background: hsla(340,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">it<\/span><\/div>\n<div style=\"background: hsla(360,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">las<\/span><\/div>\n<div style=\"background: hsla(380,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">quid<\/span><\/div>\n<div style=\"background: hsla(400,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">tostidos<\/span><\/div>\n<div style=\"background: hsla(420,100%,50%,.1);\" class=\"flex-item\"><span contenteditable=\"true\">gray<\/span><\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS2.1 provided basic layout modes, from inline and block and tables to positioned layout, which is either based on normal flow or a relative position from that flow, or absolute and fixed positioning, which avoids the flow all together. Add &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/05-css3-multicolumn-layout\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4129"}],"collection":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=4129"}],"version-history":[{"count":1,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4129\/revisions"}],"predecessor-version":[{"id":4130,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4129\/revisions\/4130"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=4129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=4129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=4129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}