# Layout

The layout system use the concept of rows and columns. You can create sized columns or leave the system to make your layout fluid. You'll be able to set the size for each breakpoint, even on nested columns.

# Breakpoints

Vue Material layout uses some breakpoints for responsiveness:

Screen Size Amount Description
xsmall For screens who have the maximum of 600px wide. For small, medium and large handsets in portrait. Also applies to small tablets in portrait. <600px
small For screens who have between of 600px and 960px wide. For medium and large handsets in landscape, small and large tablets in portrait mode and some desktop monitors. 960px
medium For screens who have between of 960px and 1280px wide. For small and large tablets in landscape and desktop monitors. 1280px
large For screens who have between of 1280px and 1920px wide. For large desktop monitors. 1920px
xlarge For screens bigger than 1920px wide. For huge desktop monitors or side-by-side screens. >1920px

# Column Layout

What you have to do to getting started with layouts is to create a md-layout parent element, that will hold a list of md-layout-item. You can set up as many columns you want: 

<div class="md-layout">
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
</div>

By default layout items do not have space between each other. This can be kind of bad for regular layouts, like a list of card, for example. You can set Vue Material to calculate automatically the space between elements and those spaces are based on the screen width, using the same breakpoints:

Screen Size Amount
xsmall 8px
small 16px
medium 24px
large 48px

# Gutter

Look at this pice of code and resize you browser to see the changes: 

<div class="md-layout md-gutter">
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
</div>

# Size

In the last examples the layout system did the calculation of the children sizes based on the amount of items. But if you want to set sizes for each item? You can simply set a md-size-[amount] in the item that you want, e.g. md-size-30. The sizes, that are always in %, can be values multiple of 5 and also accepts the values 33 and 66.

You don't even need to set the size for all elements, as the flexbox model will calculate the size for the remaining items. Cool, uh? 

<div class="md-layout md-gutter">
  <div class="md-layout-item md-size-15 just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item just-for-demo"></div>
  <div class="md-layout-item md-size-15 just-for-demo"></div>
</div>

Note: For more details about the layout with grid and columns that you can use please check this link: https://vuematerial.io/ui-elements/layout

← Typography →