コンテンツが中央に配置されたレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

Grid of Responsive Squares

このスタック オーバーフロー スレッドで、ユーザーが垂直方向と水平方向の応答性の高い正方形のレイアウトの作成について問い合わせています。整列したcontent.

元のソリューション (2018)

元のソリューションは、CSS の display: flex プロパティを使用して柔軟なレイアウトと align-items を作成することを提案しました。 center および justify-content: 各正方形内のコンテンツを中央に配置する center プロパティ。レスポンシブ デザインは、メディア クエリを使用して実現されました。

<br>.container {<br> display: flex;<br> flex-direction: row;<br> flex-wrap: Wrap; <br> justify-content: space-around;<br>}</p>
<p>.square {<br> width: 100px;<br> height: 100px;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br>}</p>
<p>@media (max-width: 768px) {<br> .square {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 50%;

ログイン後にコピー

}
}

更新されたソリューション (2022) )

付きCSS の進化により、正方形のグリッド レイアウトの実装を簡素化するいくつかの新しいプロパティが導入されました。

• grid: コンテナのグリッド レイアウトを定義します。
• aspect-ratio:各グリッド項目のアスペクト比を指定し、正方形のままであるようにします。
• object-fit: 正方形内に画像を表示する方法を制御します。

<br>.container {<br> display: Grid;<br> Grid-template-columns:repeat(3, 1fr); <br> ギャップ: 2%;<br>}</p>
<p>.square {<br> アスペクト比: 1/1;<br> 表示: flex;<br> align-items: center;<br> justify-content: center;<br> パディング: 5%;<br> 背景-色: #1E1E1E;<br> 色: #fff;<br>}</p>
<p>.square img {<br> 幅: 100%;<br> 高さ: 100%;<br> オブジェクトフィット: 含む;<br> オブジェクト位置: 中心;<br>}</p>
<p>.square.fullImg {<br> padding: 0;<br>}</p>
<p>.square.fullImg img {<br> object-fit: cover;<br>}<br>

最終結果配置と縦横比を維持しながら、テキスト、画像、リストなどのさまざまなタイプのコンテンツを含めることができる正方形を含むレスポンシブなグリッド レイアウトを作成します比率。

以上がコンテンツが中央に配置されたレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。