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

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

キーテイクアウト：

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

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

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

小さな畫面上：

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

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

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

8px間隔

：

<div>
  <a href="http://ipnx.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

を使用しています

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

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

小さな畫面には、8px間隔の2列のレイアウトがあります。 列幅の計(jì)算： inline-block 1行あたりの合計(jì)列間スペース：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列のレイアウトがあります。列幅の計(jì)算：

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

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

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

FlexBox：

の使用

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

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

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

<div>
  <a href="http://ipnx.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid " />
  </a>
  <!-- ...more images... -->
</div>

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

結(jié)果は、すべての畫面で等しい列です。大畫面の例：

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="http://ipnx.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  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デモを參照してください

結(jié)論：justify-content

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

スクリーンキャストでFlexboxレイアウトの詳細(xì)：FlexBoxで複數(shù)の列レイアウトを作成します。

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

以上が最新のCSSを使用して、レスポンシブ畫像グリッドを構(gòu)築しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。