CSS Grid para empezar

CSS Grid organiza contenido mediante filas y columnas relacionadas. Ayuda a definir estructuras que no dependen de colocar cada elemento por separado.

Definir una cuadrícula

Empieza con pocas columnas y contenido realista. Observa cómo se relaciona la longitud del texto con el tamaño de las áreas.

Una cuadrícula no obliga a utilizar dimensiones rígidas. El espacio disponible y las necesidades del contenido pueden guiar su reparto.

Orden visual y documento

El lugar donde se dibuja un elemento no debe hacer incomprensible su posición en la lectura o en el recorrido del teclado.

Revisa primero el orden del HTML. Una estructura lógica permite cambiar la distribución con menos sorpresas.

Combinar herramientas

Grid puede resolver la estructura general y Flexbox la distribución de un componente. Cada herramienta tiene un papel.

Prueba imágenes, títulos largos y bloques vacíos. La cuadrícula debe responder también cuando el contenido no tiene la longitud del ejemplo inicial.

Seguir aprendiendo

Relaciona esta lectura con los demás recursos de Yovrix y prueba las ideas en un proyecto pequeño. Las imágenes, cuando aparecen, son ilustrativas.