Grid-template en CSS: Aprende a diseñar layouts como un profesional

La primera vez que intenté organizar un diseño web complejo me encontré frente a una mezcla de divs que parecían jugar a las escondidas. Era muy frustrante, porque cada ajuste que hacía en un margen o un padding hacía que algo se descolocara, y sentía que estaba construyendo un castillo de naipes. Por eso, tenía que usar trucos con márgenes, floats y flexbox para intentar que todo se viera bien, hasta que alguien me habló de grid-template en CSS y la vida se hizo más fácil.

Esta propiedad no solo me permitió definir un diseño claro, sino que me dio el control para crear layouts limpios y profesionales en mucho menos tiempo. Así que si alguna vez te has sentido igual, sigue leyendo porque estoy seguro de que aprender a usar esta propiedad te abrirá un mundo de posibilidades.

¿Qué es grid-template en CSS?

Como puedes intuir por su nombre, grid-template es una propiedad del sistema CSS Grid, una de las herramientas más útiles cuando de diseñar layouts web modernos se trata. Básicamente, define la estructura de una cuadrícula, especificando el tamaño de las filas y columnas, así como las áreas que ocupará cada elemento.

Piensa en ello como que estás diseñando un tablero de ajedrez. Con esta propiedad, puedes decidir cuántas casillas habrá y cómo distribuirlas. Pero no solo eso, también puedes asignar nombres a las casillas y decirle a cada pieza dónde debe ir.

¿Para qué sirve grid-template?

Esta propiedad es especialmente útil porque te permite llevar una configuración más compacta y legible de la cuadrícula. De esta manera, facilita el manejo de diseños complejos y hace que el código sea más limpio y entendible. ¿Qué tal si vemos algunas de sus principales utilidades?

1. Organizar contenido con precisión: Sirve para crear layouts predecibles y bien definidos.
2. Simplificar el diseño de páginas complejas: Es ideal para layouts con múltiples secciones, como encabezados, menús laterales y pies de página.
3. Hacer tu código más legible: Si agregas nombres descriptivos para las áreas, cualquiera podrá entender tu diseño de un vistazo, lo que favorece también el trabajo en equipo.
4. Ahorrar tiempo en ajustes: Si necesitas reorganizar el diseño, solo tienes que cambiar el grid sin modificar el HTML, y listo.

Sintaxis de grid-template

Lo que la hace tan útil es que combina tres propiedades principales: grid-template-rows, que define las alturas de las filas; grid-template-columns, que establece los anchos de las columnas; y grid-template-areas, que asigna nombres a las áreas específicas del grid.

Veamos un ejemplo básico:

.grid-container {
  display: grid;
  grid-template-rows: 100px 1fr 50px;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Pero, ¿qué significa este código? Veámoslo con más detalle:

grid-template-rows crea tres filas:

• La primera mide 100px.
• La segunda ocupa el espacio restante (1fr).
• La tercera mide 50px.

grid-template-columns divide el layout en dos columnas:

• La primera mide 200px.
• La segunda ocupa el espacio restante.

grid-template-areas es la que asigna nombres a las secciones del diseño.

Ejemplos

Me gustaría que ahora veamos dos ejemplos prácticos de esta propiedad, para que veas mejor en qué escenarios puedes usarla y con qué propósitos:

Crear un layout de página web

Con esta propiedad, puedes diseñar una página típica, incluyendo el encabezado, el menú lateral, el contenido principal y el pie de página.

CSS

.grid-container {
  display: grid;
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 150px 1fr;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
}

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

HTML

<div class="grid-container">
  <div class="header">Encabezado</div>
  <div class="menu">Menú</div>
  <div class="content">Contenido</div>
  <div class="footer">Pie de página</div>
</div>

Diseño responsivo

¿Y si quieres que el menú lateral pase a la parte superior en pantallas pequeñas? Con media queries, es facilísimo:

@media (max-width: 600px) {
  .grid-container {
    grid-template-rows: 80px auto 1fr 50px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "menu"
      "content"
      "footer";
  }
}

Consejos para trabajar con grid-template

Luego de haber visto cómo funciona, te daré algunas recomendaciones para que puedas aprovechar todo lo que esta propiedad puede ofrecer:

1. Define áreas descriptivas: Te recomiendo usar nombres como header, menu, content en lugar de algo genérico como box1. Esto te ayudará a tener todo más organizado y accesible.
2. Combina con otras propiedades de CSS Grid: Usa gap para espaciar las filas y columnas.
3. Prueba en diferentes tamaños de pantalla: Asegúrate de que tu diseño sea responsivo para que tus usuarios tengan una gran experiencia sin importar el dispositivo desde el que navegan.
4. Mantén tu CSS organizado: Agrupa las reglas relacionadas con el grid para facilitar el mantenimiento.

Como puedes ver, si alguna vez sentiste que tus diseños eran un caos y no sabías cómo manejarlos más óptimamente, esta propiedad de CSS es la solución que estabas buscando. Ahora podrás estructurar tus layouts de forma clara, eficiente y visualmente atractiva.

¿Te gustaría crear páginas web innovadoras y empezar a trabajar en el sector IT? Puedes hacer estos sueños realidad al unirte a nuestro Bootcamp en Desarrollo Web. Nuestro curso está diseñado para que aprendas a manejar las tecnologías de desarrollo más importantes, como CSS, HTML, JavaScript y React. Además, podrás desarrollar las habilidades necesarias para destacar en un sector lleno de oportunidades.

¡El momento de cambiar tu vida empieza aquí!