webpackJsonp([1,37],{836:function(t,e,a){functionl(t){a(893)}vard=a(1)(null,a(926),l,"data-v-172ceb40",null);t.exports=d.exports},837:function(t,e,a){functionl(t){a(916)}vard=a(1)(null,a(956),l,"data-v-d5af2876",null);t.exports=d.exports},861:function(t,e,a){e=t.exports=a(795)(),e.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}',""])},884:function(t,e,a){e=t.exports=a(795)(),e.push([t.i,".demo>[data-v-d5af2876]{margin:.5em 0;display:block}",""])},893:function(t,e,a){varl=a(861);"string"==typeofl&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);a(796)("3360f65c",l,!0)},916:function(t,e,a){varl=a(884);"string"==typeofl&&(l=[[t.i,l,""]]),l.locals&&(t.exports=l.locals);a(796)("36f35de2",l,!0)},926:function(t,e){t.exports={render:function(){vart=this,e=t.$createElement,a=t._self._c||e;returna("page-content",{attrs:{"page-title":"UI Elements - Layout"}},[a("docs-component",[a("div",{slot:"description"},[a("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(" "),a("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 "),a("code",[t._v("md-gutter")]),t._v(" property. If you want the automatic calculation the engine will set "),a("code",[t._v("16px")]),t._v(" for small screens and then apply "),a("code",[t._v("24px")]),t._v(" for medium to large.")]),t._v(" "),a("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(" "),a("p",[t._v("ThegridsystemmakesuseofflexboxtobeflexibleenoughandgivethebestexperiencewithagreatandeasyAPI.Youcancreateresponsivelayoutswithfewlinesofcodewithadeclarativeengine.Thesystemworkwith
