グリッドの使用

コンテナー

コンテナーは、サイトのコンテンツをラップする固定幅の要素です。一定のサイズを維持し、margin を使って中央に配置します。コンテナーは、グリッド内でページコンテンツを中央に配置する最も簡単な方法です。

テキストコンテナー

ページに中央揃えのテキストを 1 つの列だけ配置する場合があります。テキストコンテナーは、このページの説明のように、流れるテキストの 1 つの列用に最適化された特殊なタイプのコンテナーです。

テキストコンテナーは グリッドを使用する必要はなく基本的なページレイアウトを簡略化します。

グリッドコンテンツ

列のフロー

グリッドは必ずしも行を指定する必要はありません。columns を ui grid の直下の子として含めると、現在の行でグリッド列がすべて使用されたときにコンテンツは自動的に次の行に流れます。

行のクリア

行ラッパーを追加すると、手動で新しい行を開始するように指定できます。

行の幅の指定

グリッドの列数を指定すると、列が所定の列数を持つ行に分割されます。追加の列は自動的に次の行に流れます。

列幅の指定

各列の列幅を個別に指定することもできます

特別なバリエーション

グリッドをテーブルのようにフォーマットする特別なバリエーションでは、行を指定する必要があります。たとえば、divided grid または celled grid には行ラッパーが必要です。

グリッドの調整

コンテンツの中央揃え

行が 16 のグリッド列すべてを占有しない場合、ui centered grid、centered row、または centered column を使用して、グリッド内の列のコンテンツを中央に揃えることができます。

フロートさせた行

Semantic UI のグリッドはフレックスボックスに基づいているため、左にフロートしたアイテムを先頭に、右にフロートしたアイテムをその行の最後に配置する必要があります。

テキストの配置

グリッド、行、または列レベルで配置のバリエーションを使用して、テキストの配置を指定できます。

垂直方向の配置

グリッド、行、または列レベルで垂直方向の配置を指定できます。

等幅の列

equal width grid を指定すると、1 行に均等に収まるように列サイズが自動的に決定されます

レスポンシブパターン

倍増

デバイスの切り替わりごとに列幅を 2 倍にすることができます

スタック可能

モバイルで列をスタックさせることができます

レスポンシブ幅の調整

さまざまな画面で異なる幅に列を表示するように指定できます

デバイスの可視性の指定

特定の画面でのみ列を表示するように指定できます