Columnas y filas en Grid

Definición de columnas con grid-template-columns

La propiedad grid-template-columns es una de las características fundamentales de CSS Grid que nos permite definir la estructura de columnas en nuestro layout. Con ella podemos especificar el número de columnas que tendrá nuestra cuadrícula y el tamaño de cada una de ellas.

Para empezar a trabajar con columnas en Grid, primero necesitamos establecer un contenedor con display: grid. Una vez hecho esto, podemos usar grid-template-columns para definir la estructura horizontal de nuestra cuadrícula.

Sintaxis básica

La sintaxis de grid-template-columns consiste en especificar el ancho de cada columna separado por espacios:

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

En este ejemplo, estamos creando una cuadrícula con tres columnas: la primera de 100px, la segunda de 200px y la tercera de 100px.

Utilizando diferentes unidades

Podemos utilizar diversas unidades de medida para definir el ancho de nuestras columnas:

.container {
  display: grid;
  grid-template-columns: 100px 30% 10em;
}

Este código crea tres columnas con diferentes unidades:

• La primera columna tiene un ancho fijo de 100 píxeles
• La segunda ocupa el 30% del ancho disponible
• La tercera tiene un ancho de 10em (relativo al tamaño de fuente)

Columnas con tamaño automático

Podemos usar el valor auto para que una columna ocupe el espacio disponible según su contenido:

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
}

En este caso, la columna central se expandirá automáticamente para ocupar el espacio restante después de asignar 100px a las columnas de los extremos.

Combinando con grid-gap

La propiedad grid-template-columns funciona muy bien en combinación con gap (anteriormente conocida como grid-gap), que nos permite establecer el espacio entre columnas:

.container {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  gap: 20px;
}

Este código crea tres columnas de 150px cada una, con un espacio de 20px entre ellas.

Ejemplo práctico: Galería de imágenes

Veamos un ejemplo práctico de cómo podríamos crear una galería de imágenes simple usando grid-template-columns:

.gallery {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  gap: 15px;
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

Este código crea una galería con tres columnas de 200px cada una. Las imágenes se colocarán automáticamente en la cuadrícula, llenando cada celda disponible de izquierda a derecha y de arriba abajo.

Creando layouts asimétricos

Una de las ventajas principales de CSS Grid es la facilidad para crear diseños asimétricos. Podemos definir columnas de diferentes tamaños para crear layouts más interesantes:

.asymmetric-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

Este ejemplo crea un layout de tres columnas donde la columna central es el doble de ancha que las columnas laterales. La unidad fr (que veremos con más detalle en otra sección) distribuye el espacio disponible proporcionalmente.

Compatibilidad con navegadores

CSS Grid tiene un excelente soporte en los navegadores modernos. Sin embargo, si necesitas compatibilidad con navegadores más antiguos, considera usar un enfoque de "progressive enhancement" o herramientas como Autoprefixer para generar los prefijos necesarios.

/* Ejemplo con prefijos para mayor compatibilidad */
.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100px 200px 100px;
  grid-template-columns: 100px 200px 100px;
}

La propiedad grid-template-columns es solo el comienzo para crear layouts potentes con CSS Grid. En las siguientes secciones exploraremos cómo definir filas, usar unidades flexibles y aprovechar funciones avanzadas para crear diseños aún más sofisticados.

Definición de filas con grid-template-rows

Así como podemos definir columnas en CSS Grid, también podemos controlar la altura de las filas utilizando la propiedad grid-template-rows. Esta propiedad nos permite establecer el tamaño vertical de cada fila en nuestra cuadrícula de manera precisa y flexible.

Para trabajar con filas en Grid, primero necesitamos tener un contenedor con display: grid. Una vez configurado, podemos usar grid-template-rows para definir la estructura vertical de nuestra cuadrícula.

Sintaxis básica

La sintaxis de grid-template-rows es similar a la de columnas, especificando la altura de cada fila separada por espacios:

.container {
  display: grid;
  grid-template-rows: 100px 200px 150px;
}

Este ejemplo crea una cuadrícula con tres filas de diferentes alturas: 100px, 200px y 150px respectivamente.

Diferentes unidades para definir filas

Podemos utilizar diversas unidades de medida para establecer la altura de nuestras filas:

.container {
  display: grid;
  grid-template-rows: 100px 25vh 5em;
}

En este código:

• La primera fila tiene una altura fija de 100 píxeles
• La segunda fila ocupa el 25% de la altura de la ventana (viewport height)
• La tercera fila tiene una altura de 5em (relativa al tamaño de fuente)

Filas con altura automática

El valor auto permite que una fila se ajuste automáticamente según el contenido que contiene:

.container {
  display: grid;
  grid-template-rows: 100px auto 100px;
}

En este caso, la fila central se expandirá para acomodar su contenido, mientras que las filas superior e inferior mantendrán una altura fija de 100px.

Combinando filas y columnas

Para crear una cuadrícula completa, podemos combinar grid-template-rows con grid-template-columns:

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 150px 300px;
  gap: 15px;
}

Este código crea una cuadrícula de 2×2 con columnas de 200px de ancho y filas de 150px y 300px de altura, con un espacio de 15px entre ellas.

Ejemplo práctico: Tarjeta de perfil

Veamos cómo podríamos crear una tarjeta de perfil simple utilizando grid-template-rows:

.profile-card {
  display: grid;
  grid-template-rows: 200px auto 50px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.profile-header {
  background-color: #5c6bc0;
}

.profile-content {
  padding: 20px;
}

.profile-footer {
  background-color: #f5f5f5;
  padding: 10px;
  text-align: center;
}

<div class="profile-card">
  <div class="profile-header"></div>
  <div class="profile-content">
    <h2>Jane Doe</h2>
    <p>Frontend Developer with 5 years of experience in creating responsive web designs.</p>
  </div>
  <div class="profile-footer">
    <a href="#">Contact</a>
  </div>
</div>

En este ejemplo, creamos una tarjeta con tres secciones verticales: un encabezado de 200px, un contenido que se ajusta automáticamente y un pie de 50px.

Manejo de contenido desbordado

Cuando el contenido es más grande que el tamaño definido para una fila, podemos controlar su comportamiento con la propiedad overflow:

.container {
  display: grid;
  grid-template-rows: 100px 100px;
}

.row-item {
  overflow: auto; /* Añade barras de desplazamiento si el contenido es demasiado grande */
}

Filas implícitas vs. explícitas

Las filas que definimos con grid-template-rows son filas explícitas. Si nuestro contenido requiere más filas de las que hemos definido, Grid creará automáticamente filas implícitas:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px; /* Solo definimos una fila explícitamente */
  grid-auto-rows: 150px; /* Las filas implícitas tendrán 150px de altura */
}

En este ejemplo, la primera fila tendrá 100px de altura, y cualquier fila adicional que se cree automáticamente tendrá 150px.

Alineación vertical dentro de las filas

Podemos controlar la alineación vertical de los elementos dentro de cada fila utilizando align-items:

.container {
  display: grid;
  grid-template-rows: 200px 200px;
  align-items: center; /* Centra verticalmente los elementos en sus celdas */
}

También podemos aplicar alineación a elementos individuales con align-self:

.special-item {
  align-self: start; /* Alinea este elemento específico al inicio de su celda */
}

La propiedad grid-template-rows es fundamental para controlar la dimensión vertical de nuestros layouts en CSS Grid. Combinada con otras propiedades de Grid, nos permite crear diseños precisos y flexibles que se adaptan a diferentes contenidos y dispositivos.

Unidad flexible fr y distribución de espacio

La unidad fr (fracción) es una de las innovaciones más importantes que introdujo CSS Grid. Esta unidad especial nos permite distribuir el espacio disponible de forma proporcional entre los elementos de nuestra cuadrícula, lo que simplifica enormemente la creación de layouts flexibles.

A diferencia de unidades como píxeles o porcentajes, la unidad fr representa una fracción del espacio disponible en el contenedor grid. Esto nos permite crear diseños que se adaptan automáticamente al tamaño de la pantalla sin necesidad de cálculos complejos.

Uso básico de la unidad fr

Para utilizar la unidad fr, simplemente la especificamos en nuestras definiciones de grid:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Este código crea una cuadrícula con tres columnas de igual ancho, donde cada una ocupa una fracción del espacio disponible. Es equivalente a dar a cada columna un 33.33% del ancho, pero sin necesidad de hacer cálculos manuales.

Distribución proporcional del espacio

La verdadera potencia de fr se aprecia cuando queremos distribuir el espacio de forma desigual pero proporcional:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

En este ejemplo:

• La primera columna ocupa 1/4 del espacio disponible (1fr de un total de 4fr)
• La columna central ocupa 2/4 o 1/2 del espacio (2fr de un total de 4fr)
• La tercera columna ocupa 1/4 del espacio disponible (1fr de un total de 4fr)

Combinando fr con otras unidades

Podemos combinar la unidad fr con unidades fijas para crear layouts más complejos:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

En este caso:

• La primera columna tiene un ancho fijo de 200px
• El espacio restante se divide en 3 fracciones (1fr + 2fr)
• La segunda columna ocupa 1/3 del espacio restante
• La tercera columna ocupa 2/3 del espacio restante

Distribución de espacio en filas

La unidad fr también funciona perfectamente con grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr 2fr;
  height: 500px;
}

Este código crea:

• Dos columnas de igual ancho
• Tres filas donde:
• La primera se ajusta automáticamente al contenido
• Las dos restantes dividen el espacio vertical disponible en proporciones 1:2

Ejemplo práctico: Layout de aplicación

Veamos cómo podemos crear un layout típico de aplicación usando la unidad fr:

.app-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
}

.header {
  grid-column: 1 / 3; /* Ocupa ambas columnas */
  background-color: #4a90e2;
}

.sidebar {
  background-color: #f5f5f5;
}

.main-content {
  padding: 20px;
  overflow: auto;
}

.footer {
  grid-column: 1 / 3; /* Ocupa ambas columnas */
  background-color: #333;
  color: white;
}

<div class="app-layout">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

Este ejemplo crea un layout de aplicación con:

• Una barra lateral fija de 250px
• Un área de contenido principal que ocupa el resto del espacio horizontal
• Una cabecera y un pie que se extienden por todo el ancho
• El contenido principal que ocupa todo el espacio vertical disponible

Comportamiento con espacio insuficiente

Cuando el espacio disponible es menor que el necesario para los elementos con tamaño fijo, la unidad fr se contrae primero:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  width: 500px;
}

En este caso, si el contenedor tiene 500px de ancho:

• Las columnas fijas ocupan 400px en total
• La columna central (1fr) obtiene solo 100px
• Si el contenedor se reduce a menos de 400px, la columna con fr se reducirá a 0 antes de que las columnas fijas comiencen a contraerse

Distribución de espacio restante

La unidad fr distribuye el espacio disponible después de asignar espacio a elementos con tamaño fijo:

.container {
  display: grid;
  grid-template-columns: 1fr 500px 1fr;
  gap: 20px;
  width: 1000px;
}

En este ejemplo:

• La columna central tiene un ancho fijo de 500px
• Los gaps ocupan 40px en total (20px × 2)
• El espacio restante es 460px (1000px - 500px - 40px)
• Este espacio se divide equitativamente entre las dos columnas con 1fr, dando 230px a cada una

Uso de fr en diseños responsivos

La unidad fr es perfecta para crear diseños que se adaptan a diferentes tamaños de pantalla:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

Este código crea una cuadrícula donde:

• Cada columna tiene un mínimo de 200px
• Las columnas se expanden equitativamente para llenar el espacio disponible
• El número de columnas se ajusta automáticamente según el ancho del contenedor

La unidad fr ha revolucionado la forma en que creamos layouts en CSS, permitiéndonos diseñar cuadrículas flexibles y responsivas con un código mucho más limpio y mantenible que los métodos anteriores basados en porcentajes o cálculos complejos.

Funciones repeat(), minmax() y auto-fill/auto-fit

CSS Grid ofrece funciones especializadas que nos permiten crear layouts más dinámicos y responsivos con menos código. Las funciones repeat(), minmax(), auto-fill y auto-fit son herramientas fundamentales para construir cuadrículas flexibles que se adaptan a diferentes tamaños de pantalla.

La función repeat()

La función repeat() nos permite definir patrones repetitivos en nuestras cuadrículas, evitando tener que escribir valores idénticos una y otra vez. Toma dos parámetros: el número de repeticiones y el patrón a repetir.

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  /* Equivalente a: grid-template-columns: 100px 100px 100px; */
}

También podemos repetir patrones más complejos:

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px 200px);
  /* Equivalente a: grid-template-columns: 100px 200px 100px 200px; */
}

Esta función es especialmente útil cuando trabajamos con muchas columnas o filas del mismo tamaño:

.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

La función minmax()

La función minmax() nos permite establecer un rango de tamaño para nuestras filas o columnas, definiendo un valor mínimo y un valor máximo. Esto es particularmente útil para crear diseños que se adaptan a diferentes tamaños de pantalla.

.container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

En este ejemplo, la primera columna:

• Nunca será más estrecha que 100px, incluso si el contenedor se reduce
• Nunca crecerá más de 300px, incluso si hay espacio disponible
• La segunda columna (1fr) ocupará el resto del espacio

Podemos usar minmax() para crear columnas que se adapten al contenido pero con límites:

.container {
  display: grid;
  grid-template-columns: minmax(100px, max-content) 1fr;
}

Aquí, la primera columna:

• Tendrá un mínimo de 100px
• Se expandirá para ajustarse a su contenido (max-content)
• Pero nunca superará el ancho de su contenido

Combinando repeat() y minmax()

La combinación de estas funciones nos permite crear layouts verdaderamente flexibles:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 20px;
}

Este código crea una cuadrícula de tres columnas donde cada una:

• Tiene un ancho mínimo de 100px
• Comparte equitativamente el espacio disponible (1fr)
• Mantiene el mismo tamaño que las demás columnas

Las palabras clave auto-fill y auto-fit

Las palabras clave auto-fill y auto-fit nos permiten crear un número dinámico de columnas basado en el espacio disponible. Se utilizan junto con repeat() y minmax() para crear layouts verdaderamente responsivos.

auto-fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

Con auto-fill, Grid:

• Calcula cuántas columnas de al menos 200px caben en el contenedor
• Crea ese número de columnas, cada una con un mínimo de 200px y compartiendo el espacio disponible (1fr)
• Si queda espacio extra, crea columnas vacías

auto-fit

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

Con auto-fit, Grid:

• Calcula cuántas columnas de al menos 200px caben en el contenedor
• Crea ese número de columnas, cada una con un mínimo de 200px
• Si queda espacio extra, expande las columnas existentes en lugar de crear columnas vacías

Diferencias entre auto-fill y auto-fit

La principal diferencia entre estas dos palabras clave se aprecia cuando hay más espacio disponible que el necesario para todas las columnas:

/* Con auto-fill */
.auto-fill-example {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

/* Con auto-fit */
.auto-fit-example {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

• Con auto-fill: si hay espacio para 5 columnas pero solo tenemos 3 elementos, se crearán 5 columnas (2 vacías)
• Con auto-fit: si hay espacio para 5 columnas pero solo tenemos 3 elementos, se crearán 3 columnas que se expandirán para ocupar todo el espacio

Ejemplo práctico: Galería de imágenes responsiva

Veamos cómo crear una galería de imágenes que se adapte automáticamente a diferentes tamaños de pantalla:

.responsive-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

<div class="responsive-gallery">
  <div class="gallery-item">
    <img src="image1.jpg" alt="Gallery image 1">
  </div>
  <div class="gallery-item">
    <img src="image2.jpg" alt="Gallery image 2">
  </div>
  <!-- Más elementos de galería -->
</div>

Este código crea una galería donde:

• Las imágenes tienen un ancho mínimo de 250px
• El número de columnas se ajusta automáticamente según el ancho del contenedor
• Todas las columnas tienen el mismo ancho
• Las imágenes mantienen una altura fija de 200px con object-fit: cover para evitar distorsiones

Creando layouts complejos

Podemos combinar todas estas funciones para crear layouts más complejos:

.dashboard {
  display: grid;
  grid-template-columns: 250px repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: 60px repeat(2, minmax(150px, auto));
  gap: 15px;
  height: 100vh;
}

.sidebar {
  grid-row: 1 / 4; /* Ocupa todas las filas */
}

Este ejemplo crea un dashboard con:

• Una barra lateral fija de 250px que ocupa toda la altura
• Un número variable de secciones principales que se ajustan automáticamente
• Una altura mínima para las filas de contenido, pero que pueden expandirse según sea necesario

Consideraciones de rendimiento

Estas funciones son muy potentes, pero debemos usarlas con criterio:

• minmax() puede causar recálculos frecuentes en diseños muy dinámicos
• auto-fill y auto-fit pueden crear muchas columnas en pantallas muy grandes si no establecemos límites adecuados

Para mejorar el rendimiento en casos complejos, podemos combinar Grid con media queries:

.gallery {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr); /* Móviles: 2 columnas */
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Pantallas más grandes: columnas dinámicas */
  }
}

Las funciones repeat(), minmax(), auto-fill y auto-fit son herramientas esenciales para crear layouts modernos y responsivos con CSS Grid. Dominando estas funciones, podemos crear diseños que se adaptan elegantemente a cualquier tamaño de pantalla con un código limpio y mantenible.