CSSを使用してDiviモジュールのグリッドレイアウトを作成する方法

Blair Jersyer Divi Tutorials Oct 21, 2021

Diviを使用して魅力的なWebサイトを作成することに慣れていますか? グリッドレイアウトがDiviBuilderのコア機能であることをおそらくご存知でしょう。 通常、行を作成することから始めて、その行に複数の列を作成することを選択します。 列を配置したら、ここにモジュールを追加します。 これらのモジュールにグリッドを追加することで、事態をさらに進めることができます。

このチュートリアル全体を通して、単一の列を持つDiviモジュールのCSSグリッドレイアウトを作成することにより、Diviのグリッドレイアウトを拡張する方法を探ります。 CSSグリッドは( CSS Flexを使用して)数行のCSSでコンテンツのレスポンシブグリッドを作成するのに非常に人気があります。 その後、すべてのモジュールを整理してレスポンシブにすることができます。 これは、Divi列に追加できるモジュールの追加レイアウトと見なしてください。 ここでの良い点は、ネストされたすべてのモジュールが、パディングと高さの値を設定する必要なしに同じ高さと幅を持つことです。

最終結果のプレビュー

始める前に、このチュートリアルの終わりまでに何を達成できるかを見てみましょう。

Diviモジュール用のカスタムCSSグリッドレイアウトの作成

パート1:モジュールをDivi列に追加する

最初に行う必要があることの1つは、モジュールをグリッドレイアウトに編成することです。 使用するすべてのモジュールを列に追加します。 デフォルトの通常のセクションに新しい1列の行を作成することから始めましょう。

素晴らしいウェブサイトを作成します

最高の無料ページビルダーElementor を使用

今すぐ始める

モジュールの作成

列内に、テキストモジュールを追加します。 次に、コンテンツ設定を次のように変更します。

  1. 段落テキストの上にH2見出しを追加します
  2. 背景色:#444444

また、次のように設計設定を更新します。

  1. テキストフォント:ポピンズ
  2. テキストの色:明るい
  3. [見出しテキスト]の下の[H2]タブを選択します
  4. 見出し2フォントスタイル:TT
  5. パディング:上10%、下10%、左10%右10%

:非常に簡単にするために、さまざまな背景色の複数のテキストモジュールを使用して、各モジュールの違いを示します。

レイヤービューに切り替えて、次のように次のテキストモジュールを作成します。

  1. テキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色:#4c6085

このプロセスを繰り返して、次のように3番目のテキストモジュールを作成できます。

  1. 前のテキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色:#39a0ed

このプロセスをもう一度繰り返して、次のように4番目のテキストモジュールを作成します。

  1. 前のテキストモジュールを複製します。
  2. 複製モジュールのテキスト設定を開きます。
  3. 背景色を更新する
    • 背景色:#13c4a3

次の4つのモジュールを作成するには、複数選択機能を使用して4つのモジュールすべてを選択します。 次に、モジュールをコピーして同じ列に貼り付け、合計8つのテキストモジュールを作成します。

パート2:モジュールのCSSグリッドレイアウトを作成しましょう

すべてのモジュールが追加されたので、それらのグリッドを作成しましょう。

行設定

この例では、モジュールグリッドを全幅レイアウトで表示できるように、1列のレイアウトを使用しています。 次に、行の設定を更新して、行がページの全幅を占めるようにする必要があります。 また、モジュールにマージンが追加されないように、デフォルトのガター幅を削除する必要があります。

行設定を開き、以下を更新します。

  • 側溝幅:1
  • 幅:100%
  • 最大幅:100%

モジュールのグリッドレイアウトを構築するためのCSSグリッドの列への追加

これは、CSSグリッドプロパティを使用してモジュールのレイアウトを作成するチュートリアルの重要なステップです。

これを行うには、モジュールのレイアウトを決定する3行のCSSを列に追加します。

列の設定を開き、[詳細設定]タブで、次のCSSをメイン要素内に貼り付けます。

display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;

CSSの最初の行は、 CSSグリッドモジュールに従ってコンテンツ(またはモジュール)をレイアウトします

表示:グリッド

CSSの2行目で、グリッドの列テンプレートを定義します。 この場合、グリッドには幅25%の4つの列があります。

grid-template-columns:25%25%25%25%

3行目は、自動的に生成される行について説明しています。 これは、各行の高さが、行内のコンテンツ(またはモジュール)の垂直方向の高さによって決定されることを意味します。

grid-auto-rows:auto

モバイルでグリッドレイアウトを調整する

次に、必要に応じてモバイルデバイスのグリッドレイアウトも調整する必要があります。

これを可能にするには、タブレットとモバイルの両方にCSSを追加して、列の数と各列の幅を変更する必要があります。

この例では、タブレット上のモジュールのグリッドレイアウトを、それぞれ幅が50%の2列に変更します。

レスポンシブオプションを開き、メイン要素の下にあるタブレットタブを選択して、次のCSSを貼り付けましょう。

display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;

電話のディスプレイには、単一列のレイアウトが必要です。 これを作成するには、[電話]タブの[メイン要素]の下に次のCSSを貼り付けます。

display:grid;grid-template-columns: 100%;grid-auto-rows: auto;

パート3:グリッドモジュールに変更を加える

グリッドへの新しいモジュールの追加とその反応

各モジュールがグリッドに追加されたので、さらにモジュールを追加すると、他のモジュールが右にプッシュされ、新しい行が作成されます。 とにかくこのレイアウトにはもう1つのモジュールが必要なので、最初のテキストモジュールを複製して、他のモジュールがグリッド内でどのように調整されるかを確認します。

グリッドがコンテンツの量が異なるモジュールにどのように応答するか

その間、すべてのモジュールのコンテンツの量が同じであるため、グリッドがさまざまな高さのモジュールをどのように処理するかを実際に確認することはできません。 これがどのように機能するかを確認するには、各モジュール内の段落テキストの量を変更します。 モジュールは、ほとんどのコンテンツが同じ行にあるモジュールと同じ高さのままであることに注意してください。 これ以降、行の高さも、コンテンツが最も多いモジュール(または垂直方向の高さ)によって決定されます。

グリッド上のモジュールの位置の変更

CSSグリッドのアイテムは、グリッドモジュールに組み込まれているナンバリングシステムを使用して配置できます。 グリッド上の各線は数字を表します。 列の場合、行番号は1から始まり、水平方向に続きます。 各行番号は、各列の最初と最後にあります。 したがって、列構造の場合、行番号は最初の列の左側の1から始まり、4番目の列の右側の5で終わります。 また、3つの行があるため、行の行番号は最初の行の上部の1から始まり、3番目の行の下部の4までです。

CSSグリッドでモジュール(またはグリッドアイテム)の位置を変更する場合は、特定のモジュールをグリッド内のどこに配置するかを定義するように設定できます。 これを行うと、グリッド内のモジュールのデフォルトの配置が上書きされます。

この例では、最初のテキストモジュールを別の位置に移動します。 そのためには、モジュールに2行のCSSを追加する必要があります。

最初のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けます。

grid-column: 2/4;grid-row: 2/3;

CSSの最初の行は、モジュールに列行2で開始し、列行4で終了するように指示することにより、モジュールの水平位置を定義します。

グリッド列:2/4

CSSの2行目は、モジュールに行2で開始し、行3で終了するように指示することにより、モジュール(またはグリッドアイテム)の垂直方向の位置を定義します。

グリッド行:2/3

タブレットと電話のディスプレイの場合、モジュールを元の場所に戻します。 これは、メインヘッダーをページの上部に保持するのに役立ちます。

そのためには、メイン要素のレスポンシブオプションの下にあるタブレットタブを選択し、次のCSSを貼り付けます。

grid-column: auto;grid-row: auto;

これで、モジュールの位置がグリッドアイテムの元の(自動)フローに戻ります。

この方法を使用して、さらにいくつかのモジュール(またはグリッドアイテム)を配置してみましょう。

次に、3番目のテキストモジュール(現在は一番上の行の2番目の列)をグリッド内の新しい設定位置に配置します。 この新しい位置は、列1行目で始まり、列2行目で終わり、行2行目で始まり、行4行目で終わります。

これを行うには、3番目のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けます。

grid-column: 1/2;grid-row: 2/4;

タブレット用に次のCSSを追加することで、モバイルの位置を変更できるようになりました。

grid-column: auto;grid-row: auto;

最後の変更では、7番目のモジュールをグリッド内の新しい設定位置に配置します。 この新しい位置は、列4行目で始まり、列5行目で終わり、行2行目で始まり、行4行目で終わります。

そのために、7番目のテキストモジュールの設定を開き、次のカスタムCSSをメイン要素に貼り付けましょう。

grid-column: 4/5;grid-row: 2/4;

次に、タブレット表示用に次のCSSを貼り付けます。

grid-column: auto;grid-row: auto;

モジュール(またはグリッドアイテム)のコンテンツを中央に揃える

おそらく指示にうんざりしているかもしれませんが、ここで停止すると、モジュールのコンテンツを垂直方向に整列(または中央揃え)するための便利な方法を見逃してしまいます。 モジュールのコンテンツを垂直方向の中央に配置することは、すべてをより対称的で見た目に美しいものにするため、グリッドレイアウトの優れた機能です。

そのために、flex CSSプロパティを使用してコンテンツを中央に揃えて位置合わせするCSSのスニペットを追加できます。 このスニペットを各モジュールに追加する必要があります。 複数選択を使用して、メイン要素へのカスタムCSSがまだないすべてのモジュール(またはグリッドアイテム)を選択できます(これらのモジュールをカスタム位置でオーバーライドしたくないため)。 次に、選択したモジュールの1つの設定を開いて、要素の設定を開きます。 [詳細設定]タブで、次のCSSをメイン要素に貼り付けます。

display:flex;flex-direction:column;align-items:center;justify-content:center;

これで、他の3つのモジュール(モジュール#1、#3、および#7)に個別に戻り、モジュールにグリッド上のカスタム位置を与えるために使用されたCSSに加えて、同じCSSスニペットを追加できます。 デスクトップとタブレットの両方の既存のCSSの下にCSSスニペットを必ず追加してください。

最終結果

これまでに行ったことは次のようになります。

モジュール(またはグリッドアイテム)がさまざまなブラウザー幅でスムーズに調整され、レスポンシブデザインが優れていることに気付くでしょうか。

さまざまなモジュールと設計を使用した実際の例

このグリッドシステムを使用した実際の例を見たい場合は、さまざまなモジュールを使用できます。 その手法を使用して作成できるものは次のとおりです。 これは、Fitness Gym LayoutPackで入手できます。

今あなたのすべてで

このチュートリアルでは、DiviモジュールのCSSグリッドレイアウトの作成に取り組んでいます。 プロセスはいくつかのカスタムCSSに依存していますが、それから得られる強力な結果を考えると、驚くほどそれほど多くはありません。 よりユニークなDiviレイアウトが必要な場合は、すべてのモジュールのレイアウトを列レベルで制御できると便利です。 CSS中毒者で、さらにダイビングをしたい場合は、この完全なガイドをチェックして、より多くの可能性を検討する必要があります。

コメントセクションであなたがどれほど成功しているかを見てください。