Repenser une disposition Tumblr basée sur la carte avec la grille CSS

Ce didacticiel montre comment créer une disposition de cartes réactive basée sur la grille inspirée d'une conception Tumblr à l'aide de la grille CSS, avec une repli pour les navigateurs plus âgés à l'aide de flotteurs. Nous allons construire une disposition avec une carte d'en-tête et plusieurs cartes de sujet, chacune contenant une image et un titre.

La conception finale sera entièrement réactive, s'adaptant à différentes tailles d'écran tout en maintenant un attrait visuel cohérent. La fonctionnalité de sélection des sujets ne sera pas implémenter dans ce tutoriel; Nous nous concentrons uniquement sur la disposition de la grille visuelle.

Caractéristiques de clé:

• GRID CSS: Le moteur de disposition principal pour la réactivité et la flexibilité.
• Float Floatback: assure la compatibilité avec les navigateurs plus anciens qui ne prennent pas en charge la grille CSS.
• SASS: Utilisé pour un style efficace avec des variables et des mixins.
• Éléments interactifs: Effects de survol et de mise au point pour l'amélioration de l'expérience utilisateur.
• Accessibilité: La navigation au clavier est considérée.
• Compatibilité du navigateur: résout les problèmes potentiels avec des fonctionnalités telles que object-fit et :focus-within.

Structure de balisage:

Le HTML se compose d'une liste non ordonnée ( <code><ul></ul> ) avec la classe "Grid" contenant des éléments de liste ( <code><li> ) représentant des cartes individuelles. Chaque carte de sujet (<li class="card">) comprend un lien (<a></a>) enveloppe le titre (<h2></h2>) et l'image ( <img src="https://img.php.cn/" alt="Redaignation Une disposition Tumblr basée sur la carte avec la grille CSS "> <code><img src="https://img.php.cn/" alt="Redesigning a Card-based Tumblr Layout with CSS Grid "> <!-- More topic cards --> & lt;! - Plus de cartes de sujet - & gt;

Implémentation de mise en page (grille CSS):

La disposition de la grille CSS est définie à l'aide de variables SASS pour la maintenabilité et la réactivité:

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

Styling de la carte:

object-fit: cover Le CSS stylise les cartes, garantissant que les images couvrent toute la zone de la carte à l'aide de transform: scale(), et ajoute une superposition de gradient radial pour un contraste amélioré. Les effets interactifs sur vol et mise au point sont mis en œuvre à l'aide des transitions :focus-within et CSS. Un contour de secours est fourni pour les navigateurs manquant

support.

se replat flottant:

Pour les navigateurs sans prise en charge de la grille CSS, une disposition de secours à l'aide de flotteurs est implémentée. Cela garantit une apparence visuelle et un comportement visuel similaires. La disposition flottante utilise des requêtes multimédias pour ajuster le nombre de colonnes en fonction de la taille de l'écran. La règle @supports garantit que la disposition du flotteur ne s'applique que lorsque la grille CSS n'est pas prise en charge.

Ce plan détaillé fournit une compréhension complète de l'approche du tutoriel. Le code complet, y compris les mixins et les fonctions SASS, serait trop étendu pour inclure ici, mais les extraits fournis illustrent les concepts et techniques de base utilisés pour construire cette disposition de carte réactive. La référence à l'exemple de code de code d'origine fournirait l'implémentation complète.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!