CSSグリッドと要素間の境界線を使用した新聞レイアウトのテクニック

最近、私はエレメント間の仕切りを備えたマルチローとカラムのスパンを必要とする新聞スタイルのデザインに取り組みました。モックアップ（上記）は、これが提示する複雑さを強調しています。従来のレイアウト方法はこれを重要な課題にしたでしょう。

プロジェクトの重要な要件は次のとおりです。

• クリアグリッドの概要。
• 可変列の幅と高さ。
• ブロック間の仕切り。

CSSグリッド：クラシックレイアウト用の最新のソリューション

新聞のレイアウトは、標準的なCSSの1次元の性質のために難しいことで有名です。要素は水平または垂直に流れます。 FlexBoxでさえ、強力ですが、一方向のままです。

このレイアウトには、HTMLテーブルの行と列に及ぶ列に及ぶ列が必要になり、最新のCSSの応答性と柔軟性が組み合わされました。 CSSグリッドはこのギャップをエレガントに橋渡しし、両方の世界の最高のものを提供します。そのgrid-gapプロパティは、溝を作成するのに特に役立ちますが、これらの溝内の分裂を正確に中心にするには、慎重に検討する必要があります。

これを達成するための3つのテクニックを探りましょう。

私たちの目標

3つの仕切り技術を説明するために、簡略化された新聞デザインを構築します。シンプルさは、根本的な課題に依存しています。

手法1：「フェイク」列アプローチ

このメソッドは、グリッドコンテナ内の擬似選択装置を使用して「フェイク」列を作成して、垂直線を描画します。必要に応じて水平方向の仕切りが追加されます。

<div>
  <div><div>1</div></div>
  <div><div>2</div></div>
  <div><div>3</div></div>
  <div><div>4</div></div>
</div>

列仕分けを作成します

display: gridを使用して3列のグリッドが確立されます。擬似選択因子（ ::beforeと::after ）2つのフルハイト列を生成します。

 .frontpage {
  位置：相対;
  ディスプレイ：グリッド;
  Grid-Template-Columns：1fr 1fr 1fr;
  Grid-Column-Gap：32px;
  ボーダー：1px固体透明。
  ボーダートップ：1pxソリッド＃DADCE0;
  ボーダーボトム：1px solid＃dadce0;
  オーバーフロー：隠し;
}

.frontpage :: before、
.frontpage ::後{
  位置：絶対;
  上：0;
  高さ：100％;
  コンテンツ： '';
  幅：calc（33.3％-4px）; / *溝を説明する計算 */
}

.frontpage :: before {
  左：0;
  国境右：1px solid＃dadce0;
}

.frontpage ::後{
  右：0;
  国境左：1px solid＃dadce0;
}

注： 33.3%計算は、溝幅を考慮します。式は次のとおりです。33 33% - (gutter-width / (number of gutters * number of columns)) 。

調整された幅と位置決め計算で、単一の擬似要素も使用できます。

グリッドを構築します

4つのコンテンツブロックが追加され、それぞれがモディファイアクラスと擬似エレメントよりも高いz-index備えています。

<div>
  <div class="fp-cell fp-cell--1"></div>
  <div class="fp-cell fp-cell--2"></div>
  <div class="fp-cell fp-cell--3 fp-cell--border-top"></div>
  <div class="fp-cell fp-cell--4 fp-cell--border-top"></div>
</div>

CSSはセルをスタイルし、行/列のスパンを処理します。

 .fp-cell {
  位置：相対;
  z-index：2;
  パディング：16px 0;
  バックグラウンドカラー：#fff;
}

/ *スパニングスタイル */
.fp-cell-1 {グリッドロー：1 /スパン2; }
.fp-cell-2 {grid-column：2 / span 2; }

/ * Horizo​​ntal Divider */
.fp-cell  -  border-top :: before {
  コンテンツ： '';
  位置：絶対;
  上：0;
  左：-16px;
  右：-16px;
  ボーダートップ：1pxソリッド＃DADCE0;
}

テクニック2：背景色

このアプローチはgrid-gapと背景色を活用します。 「ギャップ」は、グリッドの背景色によって視覚的に作成されます。グリッドセル内のパディングは、溝の幅をシミュレートします。

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    <div class="fp-cell fp-cell--2"><div class="fp-item">2</div></div>
    <div class="fp-cell fp-cell--3"><div class="fp-item">3</div></div>
    <div class="fp-cell fp-cell--4"><div class="fp-item">4</div></div>
  </div>
</div>

.container {overflow-x：hidden;ボーダートップ：1pxソリッド＃DADCE0;ボーダーボトム：1px solid＃dadce0; }
.frontpage {...} / *グリッドスタイル以前と同様ですが、背景色 * /
.fp-cell {padding：16px;バックグラウンドカラー：#fff; }

コンテナはオーバーフローを処理し、パディングはセルを相殺します。

テクニック3：セルの境界

この手法は、各セルに右と下の境界を追加します。パディングはgrid-gapをシミュレートします。再びラッパーコンテナが必要です。

<div class="container">
  <div class="frontpage">
    <div class="fp-cell fp-cell--1"><div class="fp-item">1</div></div>
    ...
  </div>
</div>

.container {border-top：1px solid＃dadce0; Overflow-X：非表示; }
.FrontPage {マージン：0 -17px 0 -16px; ...} / *グリッドスタイル、国境補償の負のマージン * /
.fp-cell {padding：16px;バックグラウンドカラー：#fff;国境右：1px solid＃dadce0;ボーダーボトム：1px solid＃dadce0; }

負のマージンは、細胞の境界を補います。

結論

3つのテクニックはすべて実行可能ですが、2番目の（背景色）は、最もシンプルで潜在的に最も保守可能なソリューションを提供します。ただし、特定の制約またはDOMアクセス制限に応じて、他のアプローチが望ましい場合があります。最良の選択は、プロジェクトのコンテキストに依存します。

以上がCSSグリッドと要素間の境界線を使用した新聞レイアウトのテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。