44 liens privés
Tout est dans le titre
Tout est dans le titre
L'article date... mais les exemples sont toujours d'actualité
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Des éléments HTML peuvent "déborder" de leur cellule de grille CSS... L'auteur montre lesquels et pourquoi. Il propose enfin une solution pour ce problème.
En résumé, il y a plusieurs raisons possibles pour lesquelles un élément ne remplit pas une "cellule" de grille CSS :
- sur l'élément grille parent, justify-items ou align-items ont une valeur différente de "stretch"
- sur l'élément grille "cellule", align-self ou justify-self ont une valeur différente de "stretch"
- sur l'élément grille "cellule", la largeur ou la hauteur est contrainte
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
La liste des faits intéressants :
- les valeurs négatives < -1 peuvent être utilisées pour grid-row-end et grid-column-end
- Il est possible d'utiliser des valeurs négatives dans grid-column/row-start
- Le contenu des pseudo éléments (::before et ::after) est traité comme un "grid item"
- Certaines propriétés de grille peuvent être animées (grid-gap, grid-row-gap, grid-column-gap, grid-template-columns, grid-template-rows)
- La valeur de grid-column/row-end peut être plus petite que la valeur de début
- Le mot clé "span" peut être utilisé sur grid-column/row-start et grid-column/row-end
- grid-template-areas et les lignes nommées implicites
Tout est dans le titre
Tout est dans le titre
Les faits et astuces en question :
- Comprendre le raccourci "grid" :
- Utiliser "grid" comme raccourci de "grid-template"
- Utiliser les lignes / colonnes implicites avec grid-auto-flow
- Utiliser les Feature queries pour Edge (support de la nouvelle spec)
- Spécifier le nombre exact d'items par colonne
- Création de sticky footers avec CSS Grid
- Taille minimale d'items de grid - notamment pour la mise en place d'ellipses pour le texte
Tout est dans le titre
Tout est dans le titre... sauf que ça utilise les grilles (grid-layout)
Tout est dans le titre
Tout est dans le titre