46 liens privés
L'article aborde le problème de la gestion des espacements entre les éléments dans un conteneur utilisant Flexbox ou Grid. L'auteur se demande comment contrôler l'espacement entre certains éléments sans recourir à des solutions peu élégantes. Il propose plusieurs méthodes, comme ajuster les marges verticales, encapsuler les éléments dans un nouveau conteneur, ou utiliser le flux par défaut avec des marges CSS. Chaque méthode a ses avantages et inconvénients, notamment en termes de maintenance du code et de modification du HTML. L'auteur suggère finalement une approche utilisant des variables CSS pour gérer les espacements de manière plus flexible. Il propose également une idée pour une future propriété CSS qui permettrait de définir des espacements personnalisés pour certains éléments au sein d'un conteneur Flexbox ou Grid.
Tout est dans le titre
L'auteur pense que oui, et ses arguments sont assez convaincants.
Un excellent article sur le redesign du site de l'auteur, avec plein d'astuces CSS
Un article très complet sur les grid areas en CSS3
L'auteur présente 5 classes CSS utilitaires avec l'utilisation des "cascade layers" :
- classe "repeating grid" - pour un nombre de colonnes fixes avec le module grid
- classe "repeating flex" - idem mais avec le module flex (et possibilité de remplir l'espace restant si le nombre de colonnes réels n'est pas un multiple de celui voulu)
- classe "fluid grid" - avec une adaptation de la taille des colonnes selon l'espace disponible (utilisation du module gird)
- classe "fluid flex" - même principe mais avec utilisation du module flex
- classe "subgrid" pour utiliser les "subgrids"
Un article très clair sur le module CSS3 "grid layout"
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
L'autrice montre la réalisation de ces layouts avec l'aide de Grid ou de Flexbox
Un tuto intéressant sur l'utilisation des grilles CSS
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Une nouvelle valeur pour la propriété CSS display. L'auteur montre comment elle peut remplacer les sous grilles, par exemple
Tout est dans le titre... et les possibilités sont sympathiques : titre entouré de '----', colonne de largeur fixe de texte coupée par une image prenant toute la largeur de l'écran, etc.