SGrid `<s-grid>`

コンテンツを行と列に配置するための CSS グリッドコンテナ。 SGrid は、Shopify Polaris の <s-grid> web component 向けの型付き Vue 3 wrapper です。

import { SGrid } from 'polaris-vue-elements'

ベストプラクティス

小さな画面を考慮する。 デスクトップで機能するグリッドも、モバイルでは崩れることがあります。1 つのレイアウトに固定するのではなく、狭い幅でどう折り返し、どう並べ替えるかを決めておきます。
余白は一貫させる。 項目間の均等な間隔はレイアウトに安定したリズムを与え、見渡しやすくします。1 つのグリッドの中で異なる余白の付け方を混在させないようにします。
収まらないコンテンツに備える。 セルのサイズは決まっていても、コンテンツの長さはさまざまです。長すぎる、または幅の広すぎるコンテンツを折り返すのか、切り詰めるのか、スクロールさせるのかをあらかじめ決めておきます。
十分ならよりシンプルなコンポーネントを使う。 SGrid は強力ですが複雑さも増すため、よりシンプルなレイアウトコンポーネントで済まないかを確認し、グリッドはその機能が必要な場合のためにとっておきます。

詳しいガイダンスについては、<s-grid> に関する Shopify のベストプラクティス（英語）を参照してください。

例

Column 1

Column 2

Column 1

Column 2

vue

<script setup>
import { SGrid, SGridItem, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- SGrid controls the track layout (columns/rows/gap); each SGridItem is a cell. -->
  <SGrid gridTemplateColumns="1fr 1fr" gap="base">
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="subdued" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 1</SText>
      </SBox>
    </SGridItem>
    <SGridItem>
      <SBox background="strong" padding="base" borderRadius="200">
        <SText>Column 2</SText>
      </SBox>
    </SGridItem>
  </SGrid>
</template>

Props

Prop	型	説明
`accessibilityLabel`	`string`	要素の目的や内容を説明するラベルです。設定すると、支援技術を使用するユーザーに読み上げられ、より多くのコンテキストを提供します。要素のコンテンツだけでは支援技術を使用するユーザーにとってコンテキストが不十分な場合にのみ使用してください。
`accessibilityRole`	`"generic" \| "status" \| "main" \| "header" \| "footer" \| "section" \| "region" \| "aside" … (9 more)`	コンポーネントのコンテンツの意味的な役割を設定します。設定すると、支援技術がこの role を使用してユーザーのページ内移動を支援します。
`accessibilityVisibility`	`"visible" \| "hidden" \| "exclusive"`	要素の表示状態を変更します。 - `visible`: 要素はすべてのユーザーに表示されます。 - `hidden`: 要素はアクセシビリティツリーから削除されますが、表示されたままです。 - `exclusive`: 要素は視覚的に非表示になりますが、アクセシビリティツリーには残ります。
`alignContent`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (9 more)`	グリッドをブロック軸方向に揃えます。`placeContent` のブロックの値よりも優先されます。
`alignItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	グリッドアイテムをブロック軸方向に揃えます。
`background`	`"subdued" \| "base" \| "strong" \| "transparent"`	コンポーネントの背景色です。
`blockSize`	`"auto" \| "0"`	標準的なレイアウトにおける要素の垂直方向のサイズ（左から右、または右から左の書字モードでは高さ）です。block size は書字方向に応じて変わります。横書きのレイアウトでは高さを、縦書きのレイアウトでは幅を制御します。これにより、異なるテキスト方向でも一貫した動作が保証されます。詳しくは block-size を参照してください。
`border`	`BorderShorthand`	幅、色、スタイルを 1 つのプロパティでまとめて指定するショートハンド構文で適用するボーダーです。
`borderColor`	`"subdued" \| "base" \| "strong"`	デザインシステムのカラースケールを使用したボーダーの色です。設定すると、`border` プロパティで指定された色の値よりも優先されます。必要な視覚的強調に合わせて、`subdued`、`base`、`strong` から選択してください。
`borderRadius`	`MaybeAllValuesShorthandProperty<BoxBorderRadii>`	デザインシステムの角丸スケールを使用した要素の角の丸みです。角ごとに異なる半径を指定するための 1〜4 値の構文をサポートします。角丸や完全に丸い要素を作成するために使用します。
`borderStyle`	`"" \| MaybeAllValuesShorthandProperty<BoxBorderStyles>`	すべての辺のボーダーの視覚的なスタイル（solid、dashed、dotted など）です。設定すると、`border` プロパティで指定されたスタイルの値を上書きします。辺ごとに異なるスタイルを指定するための 1〜4 値の構文をサポートします。
`borderWidth`	`"" \| MaybeAllValuesShorthandProperty<"base" \| "small-100" \| "small" \| "large" \| "large-100" \| "none">`	すべての辺のボーダーの太さです。設定すると、`border` プロパティで指定された幅の値を上書きします。辺ごとに異なる幅を指定するための 1〜4 値の構文をサポートします。
`columnGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	インライン軸方向の要素間のスペースを調整します。`gap` の列の値よりも優先されます。受け付ける値: - 単一の `SpacingKeyword` 値（例: `large-100`） - サポートされる SpacingKeyword をクエリ値とするレスポンシブ値文字列
`display`	`"auto" \| "none"`	コンポーネントの外側の display タイプです。外側のタイプは、コンポーネントがフローレイアウトにどのように参加するかを設定します。 - `auto` はコンポーネントの初期値です。実際の値はコンポーネントとコンテキストによって決まります。 - `none` はコンポーネントを非表示にしてアクセシビリティツリーから削除し、スクリーンリーダーから見えなくします。
`gap`	`MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>`	要素間のスペースを調整します。受け付ける値: - 両方の軸に適用される単一の `SpacingKeyword` 値（例: `large-100`） - インライン軸とブロック軸をそれぞれ設定する値のペア（例: `large-100 large-500`） - サポートされる SpacingKeyword をクエリ値とするレスポンシブ値文字列
`gridTemplateColumns`	`string`	グリッドの列とそのサイズです。受け付ける値: - トラックサイズの値（例: `1fr auto`） - サポートされるトラックサイズの値をクエリ値とするレスポンシブ値文字列
`gridTemplateRows`	`string`	グリッドの行とそのサイズです。以下を受け付けます: - `1fr auto` などのトラックサイズの値 - サポートされているトラックサイズの値をクエリ値として指定するレスポンシブ値文字列
`inlineSize`	`"auto" \| "0"`	横書きモードでは幅、縦書きモードでは高さです。テキストの方向に適応するフロー相対のサイズ指定に使用します。詳しくは inline-size を参照してください。
`justifyContent`	`"normal" \| "stretch" \| "center" \| "start" \| "end" \| "unsafe center" \| "unsafe start" \| "unsafe end" … (6 more)`	グリッドをインライン軸方向に揃えます。`placeContent` のインラインの値よりも優先されます。
`justifyItems`	`"normal" \| "stretch" \| "baseline" \| "first baseline" \| "last baseline" \| "center" \| "start" \| "end" … (6 more)`	グリッドアイテムをインライン軸方向に揃えます。
`maxBlockSize`	`"none" \| "0"`	横書きモードでは最大の高さ、縦書きモードでは最大の幅です。要素がこのサイズを超えて大きくなるのを防ぎます。詳しくは max-block-size を参照してください。
`maxInlineSize`	`"none" \| "0"`	横書きモードでは最大の幅、縦書きモードでは最大の高さです。要素がこのサイズを超えて大きくなるのを防ぎます。詳しくは max-inline-size を参照してください。
`minBlockSize`	`"0"`	横書きモードでは最小の高さ、縦書きモードでは最小の幅です。要素がこのサイズより小さくなるのを防ぎます。詳しくは min-block-size を参照してください。
`minInlineSize`	`"0"`	横書きモードでは最小の幅、縦書きモードでは最小の高さです。要素がこのサイズより小さくなるのを防ぎます。詳しくは min-inline-size を参照してください。
`overflow`	`"visible" \| "hidden"`	要素のオーバーフローの動作を設定します。 - `hidden`: コンテンツが要素のコンテナより大きい場合に切り取ります。要素はスクロールできず、ユーザーはドラッグやマウスのスクロールホイールで切り取られたコンテンツにアクセスできません。 - `visible`: 要素のコンテナからはみ出したコンテンツも表示されます。
`padding`	`MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>`	コンポーネントのすべての辺に適用されるパディングです。フロー相対値を使用した 1〜4 値の構文をサポートします: - 1 つの値はすべての辺に適用されます - 2 つの値は block（上/下）と inline（左/右）に適用されます - 3 つの値は block-start（上）、inline（左/右）、block-end（下）に適用されます - 4 つの値は block-start（上）、inline-end（右）、block-end（下）、inline-start（左）に適用されます Examples:* `base`、`large none`、`base large-100 base small` パディングが取り除かれた最も近いコンテナからパディングを継承するには `auto` を使用します。サポートされている `PaddingKeyword` をクエリ値として指定するレスポンシブ値文字列も受け付けます。
`paddingBlock`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	ブロック方向のパディング（横書きモードでは上下）です。両側に 1 つの値、または block-start と block-end にスペース区切りの 2 つの値を指定できます。例:* `large none` は上に `large`、下に `none` を適用します。`padding` のブロックの値よりも優先されます。サポートされる `PaddingKeyword` をクエリ値とするレスポンシブ値文字列も受け付けます。
`paddingBlockEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-end のパディング（横書きモードでは下）です。`paddingBlock` の block-end の値よりも優先されます。サポートされる `PaddingKeyword` をクエリ値とするレスポンシブ値文字列も受け付けます。
`paddingBlockStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	block-start のパディング（横書きモードでは上）です。`paddingBlock` の block-start の値よりも優先されます。サポートされる `PaddingKeyword` をクエリ値とするレスポンシブ値文字列も受け付けます。
`paddingInline`	`MaybeResponsive<"" \| MaybeTwoValuesShorthandProperty<PaddingKeyword>>`	インライン方向のパディング（横書きモードでは左右）です。両側に 1 つの値を指定するか、inline-start と inline-end にスペース区切りで 2 つの値を指定します。Example:* `large none` は左に `large`、右に `none` を適用します。`padding` のインライン値を上書きします。サポートされている `PaddingKeyword` をクエリ値として指定するレスポンシブ値文字列も受け付けます。
`paddingInlineEnd`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-end のパディング（LTR 書字モードでは右、RTL では左）です。`paddingInline` の inline-end の値を上書きします。サポートされている `PaddingKeyword` をクエリ値として指定するレスポンシブ値文字列も受け付けます。
`paddingInlineStart`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	inline-start のパディング（LTR 書字モードでは左、RTL では右）です。`paddingInline` の inline-start の値を上書きします。サポートされている `PaddingKeyword` をクエリ値として指定するレスポンシブ値文字列も受け付けます。
`placeContent`	`"normal normal" \| "normal stretch" \| "normal center" \| "normal start" \| "normal end" \| "normal unsafe center" \| "normal unsafe start" \| "normal unsafe end" … (3 more)`	`justify-content` と `align-content` のショートハンドプロパティです。
`placeItems`	`AlignItemsKeyword \| "normal normal" \| "normal stretch" \| "normal baseline" \| "normal first baseline" \| "normal last baseline" \| "normal center" \| "normal start" … (2 more)`	`justify-items` と `align-items` のショートハンドプロパティです。
`rowGap`	`"base" \| "small-200" \| "small-100" \| "small" \| "large" \| "large-100" \| "small-500" \| "small-400" … (6 more)`	ブロック軸方向の要素間のスペースを調整します。`gap` の行の値よりも優先されます。受け付ける値: - 単一の `SpacingKeyword` 値（例: `large-100`） - サポートされる SpacingKeyword をクエリ値とするレスポンシブ値文字列

上記の一部の型の列は読みやすさのために省略されています。完全な union はライブラリが生成する TypeScript の型（src/lib/generated/types.ts）で確認できます。

Slots

Slot	説明
`default`	グリッドコンポーネント内に表示される子要素で、列、行、スペースを設定できる柔軟なグリッドレイアウトで配置されます。

SGrid <s-grid> ​

ベストプラクティス ​

例 ​

Props ​

Slots ​

SGrid `<s-grid>`

ベストプラクティス

例

Props

Slots