使用CSS網格重新設計基於卡的Tumblr佈局

>本教程演示瞭如何通過使用CSS網格設計的Tumblr設計來創建響應迅速的基於網格的卡片佈局，並為較舊的瀏覽器提供了使用浮子的後備。 我們將構建一個佈局，其中包含標頭卡和多個主題卡，每張包含圖像和標題。 >

最終設計將完全響應，可以適應不同的屏幕尺寸，同時保持一致的視覺吸引力。 選擇主題的功能將在本教程中實現；我們僅關注視覺網格佈局。

密鑰功能：

CSS網格：響應性和靈活性的主要佈局引擎。

<li> 浮點後期回退：確保與不支持CSS網格的較舊瀏覽器的兼容性。 <li> > sass：>用於使用變量和混音素的有效樣式。 <li>> 交互式元素：懸停和焦點效果，以改善用戶體驗。 <li> 可訪問性：鍵盤導航。 > <li> 瀏覽器的兼容性：解決了>和<li>>的功能的潛在問題。 。 object-fit:focus-within標記結構：

> HTML由一個代表單個卡的列表項目（ ）的無序列表（ ）組成。 每個主題卡（

）都包含一個鏈接（）包裝標題（）和圖像（ <img src="%E2%80%9C" https: alt="“" redesigning>

＆lt;！ - 更多主題卡 - ＆gt;

<ul></ul> <li><li class="card">>佈局實現（CSS Grid）：<a></a>> <h2></h2>CSS網格佈局是使用SASS變量來定義的，可維護性和響應能力：<img src="https://img.php.cn/" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards -->

卡樣式：

>

> 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過渡實現的。 為缺乏支持>的瀏覽器提供了後備大綱。

> 浮點後期：

對於沒有CSS網格支持的瀏覽器，實現了使用Floats的後備佈局。 這樣可以確保類似的視覺外觀和行為。 Float佈局使用媒體查詢根據屏幕大小調整列數。

規則可確保僅在不支持CSS網格時使用浮點佈局。 @supports>

這個詳細的大綱提供了對教程方法的全面理解。 完整的代碼（包括Sass Mixins和功能）將太廣泛，無法在此處包含，但是提供的摘要說明了用於構建此響應卡佈局時使用的核心概念和技術。 引用原始Codepen示例將提供完整的實現。

>

以上是使用CSS網格重新設計基於卡的Tumblr佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！