使用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中文网其他相关文章！