PUNTOS CLAVE
- CSS Grid permite crear layouts bidimensionales complejos con un control total sobre filas y columnas.
- La propiedad grid-template-areas es la forma más humana y visual de definir la estructura de una web.
- Combina perfectamente con Flexbox, delegando en Grid la estructura macro y en Flexbox el alineamiento micro.
A diferencia de los sistemas basados en floats o incluso Flexbox, CSS Grid nos permite pensar en dos dimensiones simultáneamente. Esto elimina la necesidad de envolver elementos en infinitos <div> de control, permitiendo que el HTML sea mucho más semántico y limpio.
#Implementación de un Layout Estilo Dashboard
Para probar que el nuevo motor de código funciona perfectamente, aquí tienes el esquema que usaría _Juan_ para crear un panel de control con Grid:
.dashboard-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100vh;
}
.main-content {
grid-area: main;
padding: 24px;
background-color: var(--github-bg-primary);
}TIP PRO
Usa la unidad
fr (fractional unit) en lugar de porcentajes para que el navegador calcule automáticamente el espacio sobrante sin errores de redondeo.#¿Por qué usar este método?
Al publicar este bloque, verás que el tema ahora le pone automáticamente la cabecera oscura, el botón de copiar y los números de línea sin que tú tengas que hacer nada más que pegar el código limpio.