CSS グリッドとフレックスボックスを使用して、高さが等しい正方形のレスポンシブ グリッド レイアウトを作成する方法

同じ高さの正方形を使用したレスポンシブ グリッド レイアウト

はじめに

レスポンシブな正方形を使用したグリッド レイアウトの作成は、特にメンテナンスを行う場合に困難になることがあります。正方形間の高さと間隔が等しい。この目的には CSS グリッドとフレックスボックスの両方を使用できますが、この記事では CSS グリッドと「padding-bottom」トリックを使用してこれを実現する方法について説明します。

高さを幅と同じに設定する

CSS グリッドの使用

CSS を使用して正方形の高さをその幅と同じに設定するにはグリッドには、正方形のアスペクト比を維持する疑似要素を作成する「padding-bottom」トリックを適用します。次の CSS ルールを適用できます:

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

これにより、コンテンツが何であっても正方形が正方形のままになります。

Flexbox の使用

Flexbox で同じ効果を実現するには、同様のアプローチを使用できます。使用:

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

Flexbox では、コンテンツ プロパティを使用して、正方形のコンテンツをその中に絶対的に配置します。

正方形間の余白の設定

「padding-bottom」トリックを使用して正方形の間に溝を作成することもできます:

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

これにより 10 ピクセルが追加されます

レスポンシブな動作

レイアウトをレスポンシブにするには、メディア クエリを使用して、画面サイズが小さい場合にグリッド レイアウトを 1 列に変更できます。

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

これにより、正方形が狭い領域に垂直に積み重なるようになります。

結論

「padding-bottom」トリックを使用すると、CSS グリッドとフレックスボックスの両方を使用して、同じ高さの正方形とそれらの間に余白があるレスポンシブなグリッド レイアウトを作成できます。この手法は広く使用されており、この一般的なレイアウト要件に対する信頼性の高いソリューションを提供します。

以上がCSS グリッドとフレックスボックスを使用して、高さが等しい正方形のレスポンシブ グリッド レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。