フレックスボックスまたはグリッドを使用してレスポンシブな正方形のグリッドを作成するにはどうすればよいですか?

応答性の高い正方形のグリッド

さまざまな画面サイズに応答し、垂直方向と水平方向に配置されたコンテンツを含む正方形のグリッドを表示するには、 Flexbox またはGrid.

Flexbox

Flexbox を使用すると、次のような柔軟なグリッドを作成できます。

 表示: flex;<br> flex-wrap: Wrap;<br> justify-content: space-around;<br> align-content: start;<br>}</p><p>.square {<br> flex-grow : 1;<br> 最大幅: 200px;<br> 背景色: #f1f1f1;<br> マージン: 10px;<br> パディング: 20px;<br> text-align: center;<br>}</p><p>@media (最大幅: 768px) {<br> .四角{</p><pre class="brush:php;toolbar:false">max-width: 100px;

}
}

 <div class="square">スクエア 1</div&gt ;<br> <div> <div class="square">正方形 3</div><br></div>

グリッド

あるいは、あなたはグリッド レイアウトを使用して、グリッドの構造をさらに制御できます:

 display: Grid;<br> Grid -template-columns:repeat(auto-fit, minmax(200px, 1fr)); // 列数を定義します<br> ギャップ: 10px; // グリッド項目間のギャップを定義します<br>}</p>
<p>.square {<br> background-color: #f1f1f1;<br> text-align: center;<br> padding: 20px;<br>}

 <div class="square">正方形 1</div><br> <div> &lt ;div class="square">正方形3</div><br></div>

フレックスボックスとグリッドはどちらも、応答性の高い正方形のグリッドを作成するさまざまな方法を提供します。 2 つのどちらを選択するかは、特定の要件と好みによって異なります。

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