Construyendo un componente de configuración

Este es un tremendo tutorial centrado en CSS de Adam Argyle. Me gusta mucho el concepto “sólo por la brecha” aquí. Grid es extremadamente poderoso, pero no tienes que usar todas sus habilidades cada vez que lo alcances. Aquí, Adam lo utiliza por razones muy ligeras, como uso como una alternativa intermedia, borderasí como un espacio más genérico. ¡Supongo que está poniendo dinero en lo que dice en términos de gapsustitución margin!

También me gusta mucho mencionar el fantástico nombre de Una Kravet para las redes flexibles: RAM . ¿Quizás hayas visto el truco del número flexible de columnas con la cuadrícula CSS? El truco adicional aquí (que vi por primera vez en Evan Minto) es usar min(). De esa manera, no solo se cubren los diseños grandes, sino que incluso los diseños más pequeños no tienen un mínimo codificado (como si 100%fuera más pequeño que 10chaquí):

.el {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(10ch, 100%), 35ch));}

Hay muchos más trucos en la publicación del blog. Los “estallidos de color” :focus-withinson divertidos e inteligentes. ¡Tanto CSS práctico para construir algo tan práctico! más publicaciones de blog como este, por favor. Afortunadamente, no tenemos que esperar, ya que Adam tiene otras publicaciones centradas en componentes como ésta en Pestañas y ésta en Sidenav.