Cheat Sheet CSS

Aligner horizontalement et verticalement un contenu

.flex-center {
  display:         flex;
  align-items:     center;
  justify-content: center;
}

Grille avec 3 colonnes

.grid-3x1fr {
  display:  grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
}

CSS Grid minmax: (démo ici)

.container{
  display: grid;
  grid-template-columns: minmax(14rem, 30%) 1fr;
}

Console.log for css

* { box-sizing: border-box !important; outline: 3px solid limegreen !important}

Ressources

Des articles pour aller plus loin

CSS Tricks
Une liste de sites utiles pour faire du css ou du design
Panorama des input en html
10 modern layouts in 1 line of CSS
La fonction CSS clamp()
Exemples de codes
Transition from 0 to auto with only CSS
5 extraits CSS que tout développeur front-end devrait connaître en 2024
12 Modern CSS One-Line Upgrades