Ahmad Shadeed montre comment ajuster automatiquement la hauteur d’une section CSS à un multiple de la hauteur d’un motif de fond répété, afin d’éviter qu’il soit coupé en bas. La combinaison de calc-size(auto, ...) et round() conserve la taille du motif, contrairement à background-repeat: round, qui le redimensionne. L’article compare les arrondis vers le haut ou le bas, puis adapte les marges internes avec padding-block. Cette technique ne fonctionnait que dans Chrome à la publication, en octobre 2026.

L’article explique comment la fonction CSS round() permet d’obtenir des tailles fluides plus prévisibles en arrondissant les valeurs calculées par des fonctions comme clamp(). Par exemple, une taille de police calculée à 19,7 px peut être arrondie à 20 px selon un intervalle défini (2 px, 4 px, etc.), améliorant ainsi la cohérence visuelle des interfaces. L’auteur illustre son propos avec des exemples concrets, comme des composants de carte ou des échelles de typographie, montrant comment cette technique optimise le rythme visuel et évite les valeurs décimales incohérentes. La fonction round() offre quatre modes (up, down, nearest, to-zero) pour adapter l’arrondi selon les besoins.