CSSグリッド

CSS グリッドは、XNUMX 次元のグリッドベースのレイアウト システムであり、これを使用すると、整理された柔軟な Web サイト レイアウトを作成できます。 グリッドとして考えてください コラム & 行 これを使用して、Web ページ要素を配置および配置できます。 ただし、HTML テーブルとは異なり、CSS グリッド レイアウトは HTML マークアップではなく CSS で制御されます。 これにより、CSS グリッドはレスポンシブ Web デザインに対して非常に柔軟になります。

CSS グリッドの仕組み Blocs

内で CSS グリッドを操作する場合 Blocsグリッド レイアウトは、親グリッド コンテナーと、ほとんどの場合、複数の内部子コンテナーという XNUMX つの主要な要素で構成されているということを考慮することが重要です。

親グリッドコンテナ

親グリッド コンテナは、主要なレイアウト情報を担当します。 たとえば、列/行の数とそれぞれのギャップ寸法がこの要素に適用されます。

グリッド子コンテナ

内側の子コンテナは、通常、Web サイトのインターフェイス要素を配置するボックスです。デフォルトでは、これらのコンテナは次のように設定されています。 自動フロー (グリッドに収まります) ただし、親グリッド コンテナー内にさまざまな方法で配置するために、カスタム クラスを使用してカスタマイズできます。

子コンテナの配置について詳しくは、こちらをご覧ください。 こちら.

グリッドコンテナの追加

CSS グリッドの使用を開始できます。 Blocs 専用の CSS Grid コンテナを追加してプロジェクトを作成します。 Bric.

または、 本部 Bric とその設定 type グリッドコンテナに。

コラム

列は、CSS グリッド レイアウト内のスペースを垂直に分割したもので、閲覧者の目を誘導し、読みやすさを最適化し、スペースを効率的に利用するのに特に役立ちます。

列を追加する

プラス ボタンをクリックすると、CSS グリッド コンテナに追加の列を追加できます。 + グリッド選択コントロールの右上隅にあります。

列を削除する

列幅コントローラーの左上にあるゴミ箱ボタンをクリックすると、CSS グリッド コンテナーから列を削除できます。

列幅

デフォルトでは、列の幅は次のように設定されています。 1fr 内の CSS Grid コンテナ上 Blocsを選択します。 fr 単位は分数を表します。 これは、グリッド コンテナー内の使用可能なスペースの一部を表します。

列幅に使用する場合、 1fr これは、列が使用可能な合計スペースの一部を占めることを意味します。 複数の列が使用する場合、 fr 単位では、スペースはすべての列の分数値の合計に対する各列の分数値に従って分割されます。

列の幅は、列幅コントロールにあるサイズ変更ハンドルを使用してブレークポイントごとに調整できます。 このハンドルをドラッグすると 左 or 右 を調整します fr 関連する列の値を 0.5 刻みで指定します。

カラムギャップ

間の間隔を設定できます コラム デザイン キャンバス上のグリッド コンテナー内の列間の空のスペースをドラッグして、各ブレークポイントに移動します。

CSS グリッド コンテナの列ギャップ測定をリセットすることもできます。 右クリック 列間のスペースで選択 幅のリセット.

行

行は CSS グリッド レイアウト内のスペースの水平方向の分割であり、コンテンツが論理的に流れ、視覚的な配置が維持されるようにします。

行を追加する

プラス ボタンをクリックすると、CSS グリッド コンテナに行を追加できます。 + グリッド選択コントロールの左下隅にあります。

行を削除する

行を削除するプロセスは、列を削除するプロセスとは少し異なります。 行を削除できるのは、グリッド レイアウトの行数に対して負の数の子コンテナーがある場合のみです。

行の子コンテナ数が負の場合、行の高さコントロールの上端にゴミ箱ボタンが表示されます (子コンテナが含まれていないもの)。 このボタンをクリックすると、行が削除されます。

行の高さ

行のデフォルトの高さは次のように設定されています。 オート 内の CSS Grid コンテナ上 Blocsを選択します。 オート このユニットは基本的に、その行の内容に基づいてその行の高さを自動的に決定するようにグリッドに指示します。 つまり、行の高さは、その行のグリッド子コンテナー内のコンテンツの最も高い部分と同じになります。

列の高さは、行の高さコントロールにあるサイズ変更ハンドルを使用してブレークポイントごとに調整できます。 このハンドルをドラッグすると up or ダウン 行の高さを調整します ピクセル.

このオプションは使用できますが、使用することをお勧めします。 オート 行の高さに関しては、レイアウトの応答性に関してより柔軟になるためです。

行のギャップ

間の間隔を設定できます 行 デザイン キャンバス上の CSS グリッド コンテナー内の行間の空のスペースをドラッグして、各ブレークポイントに移動します。

CSS グリッド コンテナの行ギャップ測定をリセットすることもできます。 右クリック 列間のスペースで選択 高さをリセット.

子コンテナの配置

デフォルトでは、これらのコンテナは次のように設定されています。 自動フロー (グリッドに収まります) ただし、親グリッド コンテナー内に配置するために、カスタム クラスを使用して個別にカスタマイズできます。

グリッドの子コンテナをグリッド内に配置する方法をカスタマイズするには、まずそれを選択し、カスタム クラスを適用する必要があります。

使い方 クラスエディタに値を適用できるようになりました。 グリッドアイテム 選択した子コンテナをそれぞれの CSS Grid 親コンテナに配置するためのルール。

列の開始

　 グリッド列の開始 プロパティは、グリッド レイアウト内でグリッド項目が開始する列グリッド線を示すために使用されます。

カラムエンド

　 グリッド列の端 プロパティは、項目がまたがる列の数、またはグリッド レイアウト内でグリッド項目が終了する列グリッド線を示すために使用されます。

行の開始

　 グリッド行の開始 プロパティは、グリッド レイアウト内でグリッド項目が開始する行グリッド ラインを示すために使用されます。

列の終わり

　 グリッド行の端 プロパティは、項目がまたがる行数、またはグリッド レイアウト内でグリッド項目が終了する行の行数を示すために使用されます。

位置決めテクニック

列開始、列終了、行開始、および行終了プロパティを使用すると、CSS グリッドの親コンテナー内に子コンテナーを配置できます。 以下に、グリッドの子の配置手法の一般的な例をいくつか示します。

ここにあるすべての例は、このセクションでさらに詳しく調べることができます Blocs サンプルプロジェクト.

スパン列

グリッドの子コンテナを複数の列にまたがるには、子コンテナにクラスを適用してから、 グリッド項目 > 列 > 終了 フィールド値を スパン 続いて、子をまたがる列の数を指定します。

スパン行

グリッドの子コンテナを複数の行にまたがるには、クラスを子コンテナに適用してから、 グリッド項目 > 行 > 終了 フィールド値を スパン 続いて、子をまたがる行数を指定します。

水平位置の変更

この例では、紫色の子コンテナはグリッド内の最初の水平方向の位置にありましたが、カスタム クラスを使用して XNUMX 番目の水平方向の位置、つまり XNUMX 番目の列に移動されています。

グリッドの子コンテナを水平に配置するには、子コンテナにクラスを適用してから、 グリッド項目 > 列 > 開始 フィールドの値を、配置したい列番号に設定します。 グリッド項目 > 行 > 開始 フィールドの値を、保持したい行番号に置き換えます。

垂直位置の変更

この例では、紫色の子コンテナは元々グリッド内の最初の垂直位置にあり、カスタム クラスを使用して XNUMX 番目の垂直位置に移動されています。

グリッドの子コンテナを垂直に配置するには、子コンテナにクラスを適用してから、 グリッド項目 > 行 > 開始 フィールドの値を、配置する行番号に置き換えます。

参考文献

この記事は、CSS グリッドの最初のステップを踏み出す初心者を対象としています。CSS グリッドに関するさらに詳細で高度な情報をお探しの場合は、この入門ガイドを読むことをお勧めします。 CSSグリッド CSS トリックより。