最新のCSSを使用して、レスポンシブ画像グリッドを構築します

この記事では、応答性のある画像ギャラリーを実用的な例として使用して、レスポンシブグリッドレイアウトの列間の間隔を習得するためのテクニックを探ります。

レスポンシブレイアウトに関するさらなる洞察については、スクリーンキャストをご覧ください。FlexBoxで複数の列レイアウトを作成します。

キーテイクアウト：

レスポンシブイメージギャラリーで示されているように、カスタムレスポンシブレイアウトは、柱間間隔を正確に制御することで達成できます。

メソッドは、レスポンシブイメージギャラリーを作成します。親のフォントサイズをゼロに設定すると、デフォルトのインラインブロック間隔が削除されます。

FlexBoxは、一般的なレイアウトの問題を効率的に解決し、すべての画面サイズにわたって等しい高さの列を作成し、レスポンシブ画像グリッドの中間間隔制御を簡素化します。
• メディアクエリとCSSグリッドレイアウトは、デバイスの特性（画面サイズ）に基づいて異なるCSSルールを適用して、レスポンシブイメージグリッドを有効にします。
• display: inline-blockレスポンシブレイアウトの構築：
大きな画面では、ギャラリーはこれに似ています

小さな画面上：

シンプルなマークアップ：

いくつかのレイアウト方法はこれを達成します。 2つを探索する前に、要件を繰り返してみましょう：

中型および小型の画面上の2列のレイアウト。

8px間隔

：

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

を使用しています

メソッドがギャラリーを構築します。 このCSSを考慮してください：
• 説明：

デフォルトのインラインブロック間隔は、親のフォントサイズをゼロに設定することによりオーバーライドされます。 チャイルドエレメントフォントサイズは、リセットする必要がある場合があります（ここではありません）

小さな画面には、8px間隔の2列のレイアウトがあります。 列幅の計算： inline-block 1行あたりの合計列間スペース：1 * 8px = 8px（8px、16pxではなく、右の列ごとに右マージンが削除されるため）。

列の幅：

（4px = 8px / 2）。display: inline-block

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

大きな画面には、8px間隔の4列のレイアウトがあります。列幅の計算：

1行あたりの合計列間スペース：3 * 8px = 24px（24px、32pxではなく、4番目の列ごとに右マージンが削除されるため）。

列の幅：
• （6px = 24px / 4）。
• calc(50% - 4px)

メソッドについては、codepenデモを参照してください。

FlexBox：

の使用

inline-blockソリューションには欠点があります。 キャプションを追加すると、1つが示されています

更新されたマークアップ：

キャプション付きの大画面ギャラリー：

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

不平等な高さはFlexBoxで解決されます。 親要素のcssを更新します：

結果は、すべての画面で等しい列です。大画面の例：

div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}

キャプションが改善されたFlexBoxを使用してCodePenデモを参照してください

FlexBoxの

プロパティは、このレイアウトを直接作成しません。

および

は、最後の行に厄介な分布をもたらします。 CSS：justify-content space-between space-around no

が必要です。

<div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png"  data-src="https://img.php.cn/?x-oss-process=image/resize,p_40"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div>

アイテムの配布を処理します。

margin-right justify-contentプロパティを使用してCodepenデモを参照してください

結論：justify-content

この投稿は、レスポンシブ画像グリッドで柱間間隔を制御するための手法を詳述しています。 で十分ですが、FlexBoxはより簡単で便利です。

スクリーンキャストでFlexboxレイアウトの詳細：FlexBoxで複数の列レイアウトを作成します。

inline-block（一般的なレスポンシブデザインの質問の繰り返しであるため、簡潔にするためにFAQSセクションが省略されています。

以上が最新のCSSを使用して、レスポンシブ画像グリッドを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。