Vuetify comes with a 12 point grid system built using flex-box. The grid is used to create specific layouts within an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl. These resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the Breakpoint service.

Material Design Viewport Breakpoints
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

The Vuetify grid is heavily inspired by the Bootstrap grid. It is integrated by using a series of containers, rows, and columns to layout and align content. If you are new to flexbox, Read the CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

In the example above, we created three equal-width columns on small, medium, large and extra large devices. The parent v-container to center the inner v-cols.

  • v-container provides the ability to center and horizontally pad your site's contents. You can also use the fluid prop to fully extend the container across all viewport and device sizes. Maintains previous 1.x functionality in which props are passed through as classes on v-container allowing for the application of helper classes (such as ma-#/pa-#/fill-height) to easily be applied
  • v-row is a wrapper component for v-col. It utilizes flex properties to control the layout and flow of its inner columns. It uses a standard gutter of 24px. This can be reduced with the dense prop or removed completely with no-gutters. This is the 2.x replacement for v-layout in 1.x.
  • v-col is a content holder that must be a direct child of v-row. This is the 2.x replacement for v-flex in 1.x.

Ensure that you understand the limitations and bugs around flexbox, such as the inability to utilize certain HTML elements as flex containers.

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

Columns will automatically take up an equal amount of space within their parent container. This can be modified using the cols prop. You can also utilize the sm, md, lg, and xl props to further define how the column will be sized in different viewport sizes.

You can break equal width columns into multiple lines. While there are workarounds for older browser versions, there was a Safari flexbox bug. This shouldn't be necessary if you're up-to-date.

When using the auto-layout, you can define the width of only one column and still have its siblings to automatically resize around it.

Assigning breakpoint width for columns can be configured to resize based upon the nature width of their content.

By default, flex components will automatically fill the available space in a row or column. They will also shrink relative to the rest of the flex items in the flex container when a specific size is not designated. You can define the column width of the v-col by using the cols prop and providing a value from 1 to 12.

Dynamically change your layout based upon resolution. (resize your screen and watch the top row layout change on sm, md, and lg breakpoints)

Vuetify 그리드 시스템의 강력함과 유연함과 함께 놀라운 사용자 인터페이스를 만들 수 있습니다.

Change the vertical alignment of flex items and their parents using the align and align-self properties.

Change the horizontal alignment of flex items using the justify property.

You can remove the negative margins from v-row and the padding from its direct v-col children using the no-gutters property.

When more than 12 columns are placed within a given row (that is not using the .flex-nowrap utility class), each group of extra columns will wrap onto a new line.

그리드 항목의 순서를 제어할 수 있습니다. 오프셋처럼 다양한 화면크기에 대응하는 순서를 지정할 수 있습니다. 어떤 어플리케이션에도 적합한 특수화된 스크린 레이아웃을 디자인 하세요.

You can also designate explicitly first or last which will assign -1 or 13 values respectively to the order CSS property.

오프셋은 아직 보이지 않는 요소를 보완하거나 컨텐츠의 위치를 제어하는데 유용합니다. 중단점(Breakpoint) 처럼, 여러 크기에 대응하여 오프셋을 정할 수 있습니다. 이를 통해 필요에 따라 레이아웃을 정확하게 미세 조정할 수 있습니다.

Offset can also be applied on a per breakpoint basis.

Using the auto margin helper utilities you can force sibling columns away from each other.

다른 프레임워크들 처럼 다양한 커스텀 레이아웃을 구현하기 위해 그리드는 중첩될 수 있습니다.

v-spacer 컴포넌트는 가능한 공간을 채우거나 두 컴포넌트 사이에 공간을 만들고 싶을때 유용합니다.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!