Adding column layout according to Material mockups:

- Maximum of 3 columns in "web" layout, with 360px fixed width columns, 40px gutters and excess padding left and right.
- 2 columns in "tablet" layout, with variable size columns and 24px gutters.
- 1 columns in "phone" layout, with 16px gutters.

app/material-styleguide.html

@@ -115,6 +115,11 @@
         <h1>Header panel</h1>
           <iframe src="./styleguide/header-panel/demo.html" scrolling="no"></iframe>
       </div>
+
+      <div class="styleguide-demo">
+        <h1>Column Layout</h1>
+          <iframe src="./styleguide/column-layout/demo.html"></iframe>
+      </div>
     </div>
 
     <script src="styleguide/navigation/sidenav.js" async defer></script>

app/styleguide/column-layout/_column-layout.scss

@@ -0,0 +1,97 @@
+/* Cutoff points for devices */
+$min_tablet_size: 768px;
+$min_desktop_size: 1024px;
+
+/* Web (desktop) layout. Columns are fixed width, and there's a maximum number
+   of 3 columns, after which we just add padding to either side. */
+$web_columns: 3;
+$web_column_size: 360px;
+$web_gutter: 40px;
+
+/* Tablet layout. There's a fixed number of columns, which grow to fill the
+   entire container. */
+$tablet_columns: 2;
+$tablet_gutter: 24px;
+
+/* Phone layout. There's a fixed number of columns, which grow to fill the
+   entire container. */
+$phone_columns: 1;
+$phone_gutter: 16px;
+
+
+/* Web layout */
+.column-layout {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  margin: 0;
+  box-sizing: border-box;
+  padding: $web_gutter / 2;
+}
+
+.column-layout > * {
+  min-width: $web_column_size;
+  width: $web_column_size;
+  margin: $web_gutter / 2;
+  box-sizing: border-box;
+}
+
+/* Alright, this is not pretty, but we need to add a number of invisible
+   elements to make sure that the flexbox elements align properly, even when
+   wrapping to less than 3 columns. It's the only way I've found to get the
+   last line to align correctly, while keeping the flexbox centered on its
+   container.
+   TODO(sgomes): Explore a different way of doing this. */
+.column-layout > .wrap-hack {
+  height: 0;
+  min-height: 0;
+  max-height: 0;
+  border: none;
+  padding: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+/* Add padding to avoid the flexbox growing beyond 3 columns.
+   Yes, we use padding with calc. I promise this is the last hack. */
+$web_block_size: $web_column_size + $web_gutter;
+$web_padding_size: $web_columns * ($web_column_size + $web_gutter) / 2;
+@media screen
+  and (min-width: ($web_columns + 1) * $web_block_size) {
+  .column-layout {
+    padding-left: calc(50% - #{$web_padding_size});
+    padding-right: calc(50% - #{$web_padding_size});
+  }
+}
+
+/* Tablet layout */
+$tablet_column_percent: 100% / $tablet_columns;
+@media screen
+  and (min-width: $min_tablet_size)
+  and (max-width: $min_desktop_size - 1px) {
+  .column-layout {
+    padding: $tablet_gutter / 2;
+  }
+
+  .column-layout > * {
+    margin: $tablet_gutter / 2;
+    min-width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
+    width: calc(#{$tablet_column_percent} - #{$tablet_gutter});
+  }
+}
+
+/* Phone layout */
+$phone_column_percent: 100% / $phone_columns;
+@media screen and (max-width: $min_tablet_size - 1px) {
+  .column-layout {
+    padding: $phone_gutter / 2;
+  }
+
+  .column-layout > * {
+    margin: $phone_gutter / 2;
+    width: calc(#{$phone_column_percent} - #{$phone_gutter});
+    min-width: calc(#{$phone_column_percent} - #{$phone_gutter});
+  }
+}

app/styleguide/column-layout/column-layout.js

@@ -0,0 +1,20 @@
+'use strict';
+
+(function() {
+  window.addEventListener('load', function() {
+    var INVISIBLE_WRAPPING_ELEMENT_CLASS = 'wrap-hack';
+    var INVISIBLE_WRAPPING_ELEMENT_COUNT = 3;
+    var columnLayouts = document.querySelectorAll('.column-layout');
+
+    for (var i = 0; i < columnLayouts.length; i++) {
+      var columnLayout = columnLayouts[i];
+      // Add some hidden elements to make sure everything aligns correctly. See
+      // CSS file for details.
+      for (var j = 0; j < INVISIBLE_WRAPPING_ELEMENT_COUNT; j++) {
+        var hiddenHackDiv = document.createElement('div');
+        hiddenHackDiv.classList.add(INVISIBLE_WRAPPING_ELEMENT_CLASS);
+        columnLayout.appendChild(hiddenHackDiv);
+      }
+    }
+  });
+})();

app/styleguide/column-layout/demo.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Column Layout</title>
+
+    <link href="//fonts.googleapis.com/css?family=RobotoDraft:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en" rel="stylesheet">
+
+    <link rel="stylesheet" href="demo.css">
+  </head>
+  <body>
+    <div class="column-layout">
+      <div>Each child</div>
+      <div>gets to be</div>
+      <div>an independent entity</div>
+      <div>to be placed in columns,</div>
+      <div>automatically.</div>
+    </div>
+    <script src="column-layout.js"></script>
+  </body>
+</html>

app/styleguide/column-layout/demo.scss

@@ -0,0 +1,21 @@
+@import '../styleguide_demo_bp';
+@import '../palette/palette';
+@import '_column-layout';
+
+.column-layout {
+  background-color: nth($paletteGrey, 2);
+}
+
+.column-layout > * {
+  min-height: 300px;
+  background-color: nth($paletteGreen, 2);
+  padding: 16px;
+}
+
+.column-layout > *:nth-of-type(3n+1) {
+  background-color: nth($paletteRed, 2);
+}
+
+.column-layout > *:nth-of-type(3n+2) {
+  background-color: nth($paletteBlue, 2);
+}