Web components | Grid | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <div class="wd-example-preview-grid">
                                                            <w-grid>
                                                              <w-grid-item>
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="1">
                                                                <div>1</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="2">
                                                                <div>2</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="3">
                                                                <div>3</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="3">
                                                                <div>3</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="3">
                                                                <div>3</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="3">
                                                                <div>3</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="4">
                                                                <div>4</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="4">
                                                                <div>4</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="4">
                                                                <div>4</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="6">
                                                                <div>6</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="6">
                                                                <div>6</div>
                                                              </w-grid-item>
                                                              <w-grid-item column-span="12">
                                                                <div>12</div>
                                                              </w-grid-item>
                                                            </w-grid>
                                                          </div>
                                                        </template>

Name	Description	Type	Default	Values
full-height	Expands the grid to occupy all available height.	boolean	false	false, true
gap	The values in the gap are mapped to our semantic spacing tokens, which are small, medium and large.	string,object	small	small, medium, large, { xs: String, s: String, m: String, l: String, xl: String, xxl: String}

Name	Description	Type	Default
column-span	Determines across how many columns the grid item should span, starting from the provided.	number, string, object	1
~~column-start~~ Deprecated	~~Determines the grid item's start column within the grid. This prop should be used as an alternative to columnEnd. If both of them are provided, only the columnEnd will be considered.~~	number	undefined
~~column-end~~ Deprecated	~~Determines the grid item's end column within the grid.~~	number	undefined

Name	Description
default	Default content slot

Name	Description
default	Default content slot

Grid

Code

Props

Slots