Redesigning a Card-based Tumblr Layout with CSS Grid

This tutorial demonstrates how to create a responsive, grid-based card layout inspired by a Tumblr design using CSS Grid, with a fallback for older browsers using floats. We'll build a layout featuring a header card and multiple topic cards, each containing an image and title.

The final design will be fully responsive, adapting to different screen sizes while maintaining a consistent visual appeal. The functionality of selecting topics will not be implemented in this tutorial; we focus solely on the visual grid layout.

Key Features:

• CSS Grid: The primary layout engine for responsiveness and flexibility.
• Float Fallback: Ensures compatibility with older browsers that don't support CSS Grid.
• Sass: Used for efficient styling with variables and mixins.
• Interactive Elements: Hover and focus effects for improved user experience.
• Accessibility: Keyboard navigation is considered.
• Browser Compatibility: Addresses potential issues with features like object-fit and :focus-within.

Markup Structure:

The HTML consists of an unordered list (<code><ul></ul>) with the class "grid" containing list items (<code><li>) representing individual cards. Each topic card (<li class="card">) includes a link (<a></a>) wrapping the title (<h2></h2>) and image (<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <code><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards -->

Layout Implementation (CSS Grid):

The CSS Grid layout is defined using Sass variables for maintainability and responsiveness:

<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>

Card Styling:

object-fit: coverThe CSS styles the cards, ensuring images cover the entire card area using transform: scale(), and adds a radial gradient overlay for improved contrast. Interactive hover and focus effects are implemented using :focus-within and CSS transitions. A fallback outline is provided for browsers lacking

support.

Float Fallback:

For browsers without CSS Grid support, a fallback layout using floats is implemented. This ensures a similar visual appearance and behavior. The float layout uses media queries to adjust the number of columns based on the screen size. The @supports rule ensures that the float layout only applies when CSS Grid is not supported.

This detailed outline provides a comprehensive understanding of the tutorial's approach. The complete code, including Sass mixins and functions, would be too extensive to include here, but the provided snippets illustrate the core concepts and techniques used in building this responsive card layout. Referencing the original CodePen example would provide the complete implementation.

The above is the detailed content of Redesigning a Card-based Tumblr Layout with CSS Grid. For more information, please follow other related articles on the PHP Chinese website!