webpackJsonp([1,34],{494:function(t,a,e){e(586);varl=e(0)(null,e(549),"data-v-172ceb40",null);t.exports=l.exports},495:function(t,a,e){e(608);varl=e(0)(null,e(577),"data-v-d5af2876",null);t.exports=l.exports},518:function(t,a,e){a=t.exports=e(4)(),a.push([t.i,'.layout-demo[data-v-172ceb40]{min-height:100px}.no-gutter>.md-layout[data-v-172ceb40]:last-child:before{background-color:rgba(0,0,0,.2)!important}.grid>.md-layout>.md-layout[data-v-172ceb40]:not(.md-column){min-height:40px;margin-bottom:16px}.grid-content[data-v-172ceb40]{padding:16px}.gutter .color .md-layout[data-v-172ceb40]{color:rgba(0,0,0,.54);font-size:13px;font-weight:500;text-indent:8px}.color:not(.md-column).md-gutter-8>.md-layout[data-v-172ceb40]:before{right:4px;left:4px}.color.md-column.md-gutter-8>.md-layout[data-v-172ceb40]:before{top:4px;bottom:4px}.color:not(.md-column).md-gutter-16>.md-layout[data-v-172ceb40]:before{right:8px;left:8px}.color.md-column.md-gutter-16>.md-layout[data-v-172ceb40]:before{top:8px;bottom:8px}.color:not(.md-column).md-gutter-24>.md-layout[data-v-172ceb40]:before{right:12px;left:12px}.color.md-column.md-gutter-24>.md-layout[data-v-172ceb40]:before{top:12px;bottom:12px}.color:not(.md-column).md-gutter-40>.md-layout[data-v-172ceb40]:before{right:20px;left:20px}.color.md-column.md-gutter-40>.md-layout[data-v-172ceb40]:before{top:20px;bottom:20px}.color>.md-layout[data-v-172ceb40]{position:relative}.color>.md-layout[data-v-172ceb40]:before{width:100%;height:100%;margin-bottom:-200%;display:block;pointer-events:none;background-color:rgba(0,0,0,.12);content:" "}.column-size[data-v-172ceb40]{height:250px!important}.column-size+.column-size[data-v-172ceb40]{margin-top:48px!important}.color-red[data-v-172ceb40]:before{background-color:#f44336!important}.color-blue[data-v-172ceb40]:before{background-color:#2196f3!important}.color-yellow[data-v-172ceb40]:before{background-color:#ffeb3b!important}.color-green[data-v-172ceb40]:before{background-color:#4caf50!important}.color-purple[data-v-172ceb40]:before{background-color:#9c27b0!important}.color-pink[data-v-172ceb40]:before{background-color:#e91e63!important}.color-teal[data-v-172ceb40]:before{background-color:#009688!important}.color-orange[data-v-172ceb40]:before{background-color:#ff9800!important}.properties table tr td[data-v-172ceb40]:first-child{white-space:nowrap}',""])},540:function(t,a,e){a=t.exports=e(4)(),a.push([t.i,".demo>[data-v-d5af2876]{margin:.5em 0;display:block}",""])},549:function(t,a){t.exports={render:function(){vart=this,a=t.$createElement,e=t._self._c||a;returne("page-content",{attrs:{"page-title":"UI Elements - Layout"}},[e("docs-component",[e("div",{slot:"description"},[e("p",[t._v("Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.")]),t._v(" "),e("p",[t._v("By default you can create gutter-free layouts, make the grid system calculate the best margin size for each screen or set it by yourself with the "),e("code",[t._v("md-gutter")]),t._v(" property. If you want the automatic calculation the engine will set "),e("code",[t._v("16px")]),t._v(" for small screens and then apply "),e("code",[t._v("24px")]),t._v(" for medium to large.")]),t._v(" "),e("p",[t._v("You can create columns size by size or rows to make your layout fluid. You can combine columns with rows or even use nested columns.")]),t._v(" "),e("p",[t._v("The grid system makes use of flexbox to be flexible enough and give the best experience with a great and easy API. You can create responsive layouts with few lines of code with a declarative engine. The system work with some breakpoints:")]),t._v(" "),e("md-table",{staticClass:"properties",slot:"properties"},[e("md-table-header",[e("md-table-row",[e("md-table-head",[t._v("Name")]),t._v(" "),e("md-table-head",[t._v("Size")]),t._v(" "),e("md-table-head",[t._v("Description")])],1)],1),t._v(" "),e("md-table
