CSSグリッドを使用したカードベースのTumblrレイアウトの再設計

このチュートリアルでは、Floatを使用した古いブラウザー用のフォールバックを使用して、CSSグリッドを使用したTumblrデザインに触発されたレスポンシブなグリッドベースのカードレイアウトを作成する方法を示しています。 ヘッダーカードと複数のトピックカードを特徴とするレイアウトを作成します。それぞれに画像とタイトルが含まれています。

最終設計は完全に応答し、一貫した視覚的魅力を維持しながら、さまざまな画面サイズに適応します。 トピックを選択する機能は、このチュートリアルで実装されていません。視覚的なグリッドレイアウトのみに焦点を当てています

主要な機能：

cssグリッド：応答性と柔軟性のためのプライマリレイアウトエンジン。

フロートフォールバック：<li>CSSグリッドをサポートしていない古いブラウザとの互換性を保証します。 sass：変数とミキシンを使用した効率的なスタイリングに使用されます。<li> インタラクティブな要素：ユーザーエクスペリエンスを改善するためのホバーとフォーカス効果。 <li> アクセシビリティ：キーボードナビゲーションが考慮されます <li>ブラウザの互換性：や。<li>などの機能に関する潜在的な問題に対処 マークアップ構造：<li> HTMLは、個々のカードを表すリスト項目（<code>object-fit）を含むクラス「グリッド」を含む順序付けられていないリスト（ <code>:focus-within ）で構成されています。 各トピックカード（）には、タイトル（ ）と画像（ <img src="https://img.php.cn/" alt="再設計）をラッピングするリンク（</ul>）が含まれています。 CSSグリッドを使用したカードベースのTumblrレイアウト "> <p> ＆lt;！ - その他のトピックカード - ＆gt; <strong> </strong></p>

レイアウト実装（CSSグリッド）：<ul></ul> <li> <li class="card">CSSグリッドレイアウトは、保守性と応答性のためにSASS変数を使用して定義されています。 <a></a> <h2></h2><img src="https://img.php.cn/" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards -->

カードのスタイリング：

CSSはカードをスタイルし、画像がを使用してカード領域全体をカバーすることを確認し、コントラストを改善するためにラジアルグラデーションオーバーレイを追加します。 インタラクティブなホバーおよびフォーカス効果は、およびCSS遷移を使用して実装されます。 サポートを欠くブラウザ向けにフォールバックアウトラインが提供されています。

フロートフォールバック：

<code class="language-scss">$item-size: 210px;
$col-gutter: 10px;
$vp-gutter: $col-gutter;
$max-cols: 5;

.grid {
  display: grid;
  grid-gap: $col-gutter;
  padding: 0 $vp-gutter;
  grid-template-columns: repeat(auto-fill, $item-size);
  grid-auto-rows: $item-size;
  max-width: grid-width($max-cols); // Function defined below
  justify-content: center;
  margin: 40px auto;
}

@function grid-width($num-cols) {
  @return $num-cols * $item-size + ($num-cols - 1) * $col-gutter;
}

// Media queries (Sass mixin) to handle header card spanning
@mixin when-n-cols($n) {
  @media screen and (min-width: #{grid-width($n) + 2 * $vp-gutter + $scrollbar-size}) {
    @content;
  }
}

@include when-n-cols(2) {
  .grid .header {
    grid-row: span 2;
    grid-column: span 2;
  }
}

// ... (Styling for cards and header) ...</code>

CSSグリッドサポートのないブラウザーの場合、フロートを使用したフォールバックレイアウトが実装されています。 これにより、同様の視覚的外観と動作が保証されます。 フロートレイアウトは、メディアクエリを使用して、画面サイズに基づいて列数を調整します。 @supportsルールは、CSSグリッドがサポートされていない場合にのみフロートレイアウトが適用されることを保証します。

この詳細なアウトラインは、チュートリアルのアプローチを包括的に理解しています。 SASSミキシンや機能を含む完全なコードは、ここに含めるには広すぎますが、提供されたスニペットは、このレスポンシブカードレイアウトの構築に使用されるコアの概念と手法を示しています。 元のCodepenの例を参照すると、完全な実装が提供されます。

以上がCSSグリッドを使用したカードベースのTumblrレイアウトの再設計の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。