正方形のロゴのグリッド

雑誌のロゴグリッドレイアウトの作成：CSSグリッドのヒントの詳細な説明

この記事では、CSSグリッドを使用して柔軟で応答性の高いマガジンロゴグリッドレイアウトを作成する方法を紹介します。このレイアウトは、多くの場合、寄付者、スポンサー、または製品ユーザーを表示するために使用されます。正方形を使用すると、レイアウトの混乱を避けるために、さまざまなサイズ、プロポーション、視覚重みのロゴを効果的に処理できます。

1。グリッド構造

エメットを使用して、HTML構造をすばやく作成します。

 <code>.grid>div*5>img</code>

タブキーを押して、次のように展開します。

<div class="grid">
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
  <div><img alt="" src=""></div>
</div>

2。CSSグリッドの基本

柔軟なコラムテクノロジーを採用：

 .grid {
  ディスプレイ：グリッド;
  Grid-Template-Columns：Repeat（auto-fill、minmax（200px、1fr））;
  グリッドギャップ：1rem;
}

これにより、柔軟な列が作成されるだけでなく、画面サイズに応じて列の数を自動的に調整することもできます。

3.正方形を作成します

高さを強制する必要はありません。擬似要素とpadding-bottomヒントを使用してください。

 .grid> div {
  背景：黒;
  パディング：1REM;
}

.grid> div :: before {
  コンテンツ： "";
  パディングボトム：100％;
  表示：ブロック;
}

これにより、各グリッドアイテムの高さがその幅と一致し、完全な正方形を形成します。

4。画像オーバーレイと中央

擬似要素で画像をオーバーレイするには、グリッドを再度使用します。

 .grid> div {
  / * ... */
  ディスプレイ：グリッド;
}
.grid> div ::前、
.grid> div> img {
  グリッドエリア：1/1 / 2/2;
}

これにより、グリッドアイテムの最初のセルにある擬似要素と写真の両方がオーバーレイを実装します。

画像を中央に配置するには、 width: 100%; height: 100%;そして、 object-fit: contain;

 .grid> div> img {
  幅：100％;
  高さ：100％;
  オブジェクトフィット：contas;
}

5。ドラッグアンドドロップサイズの調整の異常

写真をドラッグすると、写真が変形する可能性があることに注意する必要があります。

6.絶対的な位置決めの代替案を使用します

ドラッグの例外が問題である場合、絶対的な位置決めを使用できます。

方法1：

 .grid> div> img {
  位置：絶対;
  最大幅：100％;
  上：0;
  下：0;
  右：0;
  左：0;
  マージン：自動;
}

方法2：

 .grid> div> img {
  位置：絶対;
  最大幅：100％;
  トップ：50％;
  左：50％;
  変換：翻訳（-50％、-50％）;
}

どちらの方法でも、ドラッグアンドドロップの例外の問題を解決できます。

ビデオチュートリアル

（ビデオリンクは、元のテキストに提供されていない、ここに挿入する必要があります）

上記の手順を使用すると、柔軟で応答性の高いマガジンロゴグリッドレイアウトを簡単に作成できます。最高のユーザーエクスペリエンスを確保するために、ニーズに合った写真のセンタリング方法を選択してください。

以上が正方形のロゴのグリッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。