import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as i,b as t,d as e,e as d,f as r,r as o,o as p}from"./app-h9l50wZ_.js";const g={};function h(c,s){const l=o("RouteLink");return p(),n("div",null,[s[7]||(s[7]=i(`<h2 id="column-width" tabindex="-1"><a class="header-anchor" href="#column-width"><span>Column Width</span></a></h2><p>All columns share the space in the grid evenly and grow and shrink dynamically.</p><p>You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid :min-column-width=&quot;200&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="gaps" tabindex="-1"><a class="header-anchor" href="#gaps"><span>Gaps</span></a></h2>`,5)),t("p",null,[s[1]||(s[1]=e("You can set a gap which will be applied as a vertical and horizontal space between all grid items. Allowed values are ")),d(l,{to:"/design-tokens/#spaceSize"},{default:r(()=>s[0]||(s[0]=[e("the common space sizes")])),_:1}),s[2]||(s[2]=e(" and ")),s[3]||(s[3]=t("code",null,"0",-1)),s[4]||(s[4]=e(". The default is ")),s[5]||(s[5]=t("code",null,"small",-1)),s[6]||(s[6]=e("."))]),s[8]||(s[8]=i(`<div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid gap=&quot;x-small&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="grid-item-size" tabindex="-1"><a class="header-anchor" href="#grid-item-size"><span>Grid Item Size</span></a></h2><p>Once the grid is defined a grid item can span several columns and/or rows. You can adjust this by setting the column span and/or row span of each item individually. The column span can also be set to <code>&#39;fullWidth&#39;</code>.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item column-span=&quot;fullWidth&quot;&gt;&lt;ds-placeholder&gt;full width&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;6&quot; :column-span=&quot;2&quot;&gt;&lt;ds-placeholder&gt;2 columns, 6 rows&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;8&quot;&gt;&lt;ds-placeholder&gt;8 rows&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;default (1 column, 4 rows)&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="row-height" tabindex="-1"><a class="header-anchor" href="#row-height"><span>Row Height</span></a></h2><p>You can set the height of a row – but this is only recommended in combination with setting the grid item property <code>row-span</code>! With these values you can fine tune the height of grid items which will always be a multiple of the defined <code>row-height</code>.</p><p>Low row height leads to a more fine-grained item height:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid :row-height=&quot;4&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;10&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;11&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;12&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>High row height leads to a rougher item height:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid :row-height=&quot;100&quot;&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;1&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;2&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;3&quot;&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="masonry-layout" tabindex="-1"><a class="header-anchor" href="#masonry-layout"><span>Masonry Layout</span></a></h2><p>In a classic masonry layout items usually have the same width but different heights and are sorted from left to right then top to bottom. You can achieve this by calculating and setting the <code>row-span</code> programmatically for each grid item, depending on its contents.</p><p>Some items may move slightly out of order to make sure existing rows are filled before creating new ones.</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-grid&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;4&quot;&gt;&lt;ds-placeholder&gt;first&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;8&quot;&gt;&lt;ds-placeholder&gt;second&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;6&quot;&gt;&lt;ds-placeholder&gt;third&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;6&quot;&gt;&lt;ds-placeholder&gt;fourth&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;4&quot;&gt;&lt;ds-placeholder&gt;fifth&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;8&quot;&gt;&lt;ds-placeholder&gt;sixth&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>  &lt;ds-grid-item :row-span=&quot;4&quot;&gt;&lt;ds-placeholder&gt;seventh&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>
<span class="line"><span>&lt;/ds-grid&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Hint:</strong> Make sure to pass <code>numbers</code> with a colon (shortcut for <code>v-bind:</code>) so they are not interpreted as strings. For a more thorough explanation visit <a href="https://vuejs.org/v2/guide/components-props.html#Passing-a-Number" target="_blank" rel="noopener noreferrer">the Vue.js docs</a>.</p>`,15))])}const v=a(g,[["render",h],["__file","demo.html.vue"]]),b=JSON.parse('{"path":"/styleguide/src/system/components/layout/Grid/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Column Width","slug":"column-width","link":"#column-width","children":[]},{"level":2,"title":"Gaps","slug":"gaps","link":"#gaps","children":[]},{"level":2,"title":"Grid Item Size","slug":"grid-item-size","link":"#grid-item-size","children":[]},{"level":2,"title":"Row Height","slug":"row-height","link":"#row-height","children":[]},{"level":2,"title":"Masonry Layout","slug":"masonry-layout","link":"#masonry-layout","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.24,"words":672},"filePathRelative":"styleguide/src/system/components/layout/Grid/demo.md","localizedDate":"April 5, 2026","excerpt":"<h2>Column Width</h2>\\n<p>All columns share the space in the grid evenly and grow and shrink dynamically.</p>\\n<p>You can set a minimum width beyond which columns will continue to grow until there is enough space to fit another column of minimum width. (Resize the window to see the effect.)</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;ds-grid :min-column-width=\\"200\\"&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>\\n<span class=\\"line\\"><span>  &lt;ds-grid-item&gt;&lt;ds-placeholder&gt;same&lt;/ds-placeholder&gt;&lt;/ds-grid-item&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;/ds-grid&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{v as comp,b as data};
