Tutorial de CSS Grid para Principiantes

 

 Tutorial de CSS Grid para Principiantes

CSS Grid es un sistema de maquetación bidimensional que te permite crear layouts complejos de manera sencilla. Piensa en él como una "hoja de cálculo" donde puedes colocar elementos en filas y columnas.

📋 Índice

  1. ¿Qué necesitas?

  2. Conceptos básicos

  3. Tu primera cuadrícula

  4. Propiedades del contenedor

  5. Propiedades de los ítems

  6. Ejemplos prácticos

  7. Ejercicios

¿Qué necesitas?

  • Un editor de código (VS Code recomendado)

  • Un navegador moderno (Chrome, Firefox, Edge)

  • Conocimientos básicos de HTML y CSS

Conceptos básicos

Antes de empezar, familiaricémonos con los términos:

ConceptoDescripción
Grid ContainerEl elemento padre que contiene la cuadrícula
Grid ItemLos hijos directos del contenedor
Grid LineLas líneas divisorias (horizontales y verticales)
Grid CellLa unidad más pequeña (intersección de fila y columna)
Grid TrackEl espacio entre dos líneas (fila o columna completa)
Grid AreaCualquier área rectangular de celdas

Tu primera cuadrícula

Paso 1: Estructura HTML básica

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

Paso 2: CSS básico

css
/* style.css */
.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
}

.item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    font-size: 24px;
    text-align: center;
    border-radius: 5px;
}

Resultado: Una cuadrícula de 3 columnas y 2 filas con espacios de 10px entre celdas.

Propiedades del contenedor

1. display: grid

Convierte un elemento en contenedor grid.

2. grid-template-columns y grid-template-rows

Define el tamaño de columnas y filas.

css
.grid-container {
    display: grid;
    /* 3 columnas: 200px, 1fr, 2fr */
    grid-template-columns: 200px 1fr 2fr;
    /* 2 filas: 100px y auto */
    grid-template-rows: 100px auto;
}

Unidades especiales:

  • fr: fracción del espacio disponible

  • auto: se ajusta al contenido

  • %, px, em, etc.

3. gap (y row-gap / column-gap)

Espacio entre celdas:

css
.grid-container {
    gap: 20px;           /* Espacio entre filas y columnas */
    row-gap: 10px;        /* Solo entre filas */
    column-gap: 15px;     /* Solo entre columnas */
}

4. grid-template-areas

Define áreas con nombre (¡muy útil!):

css
.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
html
<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

5. justify-items y align-items

Alineación de los ítems dentro de sus celdas:

css
.grid-container {
    justify-items: center;  /* Horizontal: start, end, center, stretch */
    align-items: center;     /* Vertical: start, end, center, stretch */
}

6. justify-content y align-content

Alineación de toda la cuadrícula dentro del contenedor:

css
.grid-container {
    justify-content: center;  /* start, end, center, stretch, space-around, space-between, space-evenly */
    align-content: center;
}

Propiedades de los ítems

1. grid-column y grid-row

Controlan dónde empieza y termina un ítem:

css
.item1 {
    grid-column: 1 / 3;    /* Desde línea 1 hasta línea 3 */
    grid-row: 1 / 2;        /* Desde línea 1 hasta línea 2 */
}

/* También puedes usar span */
.item2 {
    grid-column: 2 / span 2;  /* Empieza en 2 y ocupa 2 columnas */
    grid-row: 2 / span 1;      /* Empieza en 2 y ocupa 1 fila */
}

2. grid-area

Atajo para grid-row-start / grid-column-start / grid-row-end / grid-column-end:

css
.item3 {
    grid-area: 1 / 1 / 3 / 3;  /* row-start / col-start / row-end / col-end */
}

3. justify-self y align-self

Alineación individual de un ítem:

css
.item4 {
    justify-self: end;    /* start, end, center, stretch */
    align-self: center;
}

Ejemplos prácticos

Ejemplo 1: Galería de imágenes responsive

html
<div class="gallery">
    <div class="gallery-item">1</div>
    <div class="gallery-item">2</div>
    <div class="gallery-item">3</div>
    <div class="gallery-item">4</div>
    <div class="gallery-item">5</div>
    <div class="gallery-item">6</div>
</div>
css
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.gallery-item {
    background: #e74c3c;
    color: white;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

Ejemplo 2: Layout de página completo

css
body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr;
    grid-template-areas: 
        "header header"
        "nav main"
        "footer footer";
}

header {
    grid-area: header;
    background: #2c3e50;
    color: white;
    padding: 20px;
}

nav {
    grid-area: nav;
    background: #34495e;
    color: white;
    padding: 20px;
}

main {
    grid-area: main;
    background: #ecf0f1;
    padding: 20px;
}

footer {
    grid-area: footer;
    background: #2c3e50;
    color: white;
    padding: 20px;
}
html
<header>Mi sitio web</header>
<nav>Navegación</nav>
<main>Contenido principal</main>
<footer>Pie de página</footer>

Ejercicios

🏋️ Ejercicio 1: Calculadora

Crea una cuadrícula que simule una calculadora:

css
.calculator {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    max-width: 300px;
}

.display {
    grid-column: 1 / -1;  /* Ocupa todas las columnas */
    background: #333;
    color: white;
    text-align: right;
    padding: 20px;
    font-size: 24px;
}

.zero {
    grid-column: 1 / 3;  /* El botón cero ocupa 2 columnas */
}

🏋️ Ejercicio 2: Dashboard

Crea un dashboard con:

  • Header con logo y menú

  • Sidebar con navegación

  • Área principal con estadísticas

  • Footer con información

🎯 Tips y trucos

  1. Usa repeat() para columnas repetitivas:

    css
    grid-template-columns: repeat(3, 1fr);

  2. La función minmax() para responsive:

    css
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

  3. 1fr vs auto: 1fr distribuye el espacio disponible, auto se ajusta al contenido

  4. Inspecciona el grid en DevTools de Chrome/Firefox (tienen herramientas visuales excelentes)

  5. Combina Grid con Flexbox: Usa Grid para el layout general y Flexbox para componentes pequeños

📚 Recursos adicionales

¡Y eso es todo! CSS Grid es increíblemente poderoso una vez que le agarras la mano. Practica con estos ejemplos y pronto estarás creando layouts complejos con facilidad.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más