{"id":4156,"date":"2018-03-03T00:45:54","date_gmt":"2018-03-03T00:45:54","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=4156"},"modified":"2022-03-22T18:57:01","modified_gmt":"2022-03-22T18:57:01","slug":"04-multiple-columns","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/04-multiple-columns\/","title":{"rendered":"04 Multiple Columns"},"content":{"rendered":"<p>CSS3 provides several new ways to do layout. The easiest is multiple columns within an element. It&#8217;s easy 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 can create more columns inside a box than is visually pleasing, so change it to one, two, three or four columns, depending on the size of the screen. Using media queries a small screens gets one column, tablets get two and computer monitors get three or more 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\tcolumns: 2; \r\n\/* number of columns or width of column *\/\r\n\tcolumn-gap: 2em;\r\n\tcolumn-rule-width: 3px; \r\n\/* thin, thick *\/\r\n\tcolumn-rule-style: solid;  \r\n\/* none, solid, dashed, dotted, etc *\/\r\n\tcolumn-rule-color: black;\r\n}\r\n<\/style><\/pre>\n<\/div>\n<div class=\"live-demo\"  id=\"multi\" >\n<h3>Live Demo<\/h3>\n<p>What is \u201cFun?\u201d\n<\/p>\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","protected":false},"excerpt":{"rendered":"<p>CSS3 provides several new ways to do layout. The easiest is multiple columns within an element. It&#8217;s easy to create multi-column layouts using the new CSS3 multiple columns property. The document flow can create more columns inside a box than &hellip; <a href=\"https:\/\/b.parsons.edu\/~dejongo\/04-multiple-columns\/\">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,10],"tags":[],"_links":{"self":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4156"}],"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=4156"}],"version-history":[{"count":4,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4156\/revisions"}],"predecessor-version":[{"id":4628,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/4156\/revisions\/4628"}],"wp:attachment":[{"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=4156"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=4156"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=4156"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}