Grid

Example


<vega-grid
    column="4"
	row="3"
    gap="size-16"
>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 1</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 2</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 3</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 4</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 5</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 6</div>
</vega-grid>

Example with different sizes


<vega-grid
    column="2"
    gap="size-16"
>
    <div class="v-bg-action text-inverted-primary v-p-size-8" style="grid-column: 1 /  span 2;">Child Item 1</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8" style="grid-row: span 2;">Child Item 2</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8">Child Item 3</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8" style="grid-column: 2">Child Item 4</div>
    <div class="v-bg-action text-inverted-primary v-p-size-8" style="grid-column: 1 /  span 2;">Child Item 5</div>
</vega-grid>

Usage

The vega-grid component can be used as a wrapper for implementations of a CSS Grid layout. You may set either the number columns or rows, and assign a gap in the layout.

Properties

Name	Description	Default
column	This specification defines the columns in one row. The value must be a number from 1-12 or you may set a ResponsiveType
row	This specification defines the rows number in your layout. The value must be a number from 1-6 or you can set a ResponsiveType
gap	This specification defines the gap in your layout. The value must be a Spacing token or you can set a ResponsiveType	S

All Properties

<vega-grid
    column='1|2|3 etc | {default: 2, M: 3, ...}.'
	row='1|2|3 etc | {default: 2, M: 3, ...}.'
    gap='size-8|12|16 etc | {default: size-12, M: size-16, ...}.'
>
    <div>Child Item 1</div>
    <div>Child Item 2</div>
    <div>Child Item 3</div>
</vega-grid>

For more details, view in Storybook.

Best Practices

For accessibility purposes, it is important to be aware of content reordering. Be careful not to separate the visual experience from how content is arranged on the page.

Flex is ideal for the following types of content:

Complex layouts.
When there needs to be a gap between block elements.
Elements need to overlap.
If layout is more important than content, grid is a better option than using flex.