El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

CSS Grid es un sistema de diseño bidimensional que permite crear layouts complejos de manera sencilla y eficiente. A diferencia de Flexbox, que se centra en la alineación de elementos en una sola dimensión (fila o columna), CSS Grid permite trabajar en ambas dimensiones simultáneamente. Esto lo convierte en una herramienta poderosa para diseñar páginas web modernas y responsivas.

Conceptos Clave de CSS Grid

Contenedor Grid y Elementos Grid

Contenedor Grid: Es el elemento que contiene los elementos grid. Se define aplicando la propiedad display: grid o display: inline-grid a un contenedor.
Elementos Grid: Son los elementos hijos directos del contenedor grid. Estos elementos se colocan automáticamente en una cuadrícula definida por el contenedor grid.

Definición de Filas y Columnas

Grid Template Rows: Define el número y tamaño de las filas en el contenedor grid.
Grid Template Columns: Define el número y tamaño de las columnas en el contenedor grid.

Áreas de Grid

Grid Areas: Permite nombrar áreas específicas del grid para facilitar la colocación de elementos.

Alineación y Justificación

Justify Items: Alinea los elementos grid a lo largo del eje horizontal.
Align Items: Alinea los elementos grid a lo largo del eje vertical.
Justify Content: Alinea el contenido del grid a lo largo del eje horizontal.
Align Content: Alinea el contenido del grid a lo largo del eje vertical.

Ejemplo Básico de CSS Grid

Vamos a crear un contenedor grid con tres filas y tres columnas, y colocaremos algunos elementos dentro de este contenedor.

HTML

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

CSS

/* styles.css */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
}

.grid-item {
    background-color: #4CAF50;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

Explicación del Código

HTML: Creamos un contenedor div con la clase grid-container y nueve elementos hijos con la clase grid-item.
CSS:
- display: grid;: Define el contenedor como un grid.
- grid-template-columns: repeat(3, 1fr);: Crea tres columnas de igual tamaño.
- grid-template-rows: repeat(3, 100px);: Crea tres filas de 100px de altura cada una.
- gap: 10px;: Define un espacio de 10px entre los elementos grid.
- display: flex; justify-content: center; align-items: center;: Utiliza Flexbox para centrar el contenido de cada elemento grid.

Ejercicio Práctico

Ejercicio

Crea un contenedor grid con cuatro filas y cuatro columnas. Coloca 16 elementos dentro del contenedor y aplica estilos para que cada elemento tenga un color de fondo diferente.

Solución

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
        <div class="grid-item">10</div>
        <div class="grid-item">11</div>
        <div class="grid-item">12</div>
        <div class="grid-item">13</div>
        <div class="grid-item">14</div>
        <div class="grid-item">15</div>
        <div class="grid-item">16</div>
    </div>
</body>
</html>

CSS

/* styles.css */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 100px);
    gap: 10px;
}

.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: white;
}

.grid-item:nth-child(1) { background-color: #4CAF50; }
.grid-item:nth-child(2) { background-color: #2196F3; }
.grid-item:nth-child(3) { background-color: #FF5722; }
.grid-item:nth-child(4) { background-color: #FFC107; }
.grid-item:nth-child(5) { background-color: #9C27B0; }
.grid-item:nth-child(6) { background-color: #00BCD4; }
.grid-item:nth-child(7) { background-color: #E91E63; }
.grid-item:nth-child(8) { background-color: #8BC34A; }
.grid-item:nth-child(9) { background-color: #FF9800; }
.grid-item:nth-child(10) { background-color: #3F51B5; }
.grid-item:nth-child(11) { background-color: #CDDC39; }
.grid-item:nth-child(12) { background-color: #009688; }
.grid-item:nth-child(13) { background-color: #673AB7; }
.grid-item:nth-child(14) { background-color: #FFEB3B; }
.grid-item:nth-child(15) { background-color: #795548; }
.grid-item:nth-child(16) { background-color: #607D8B; }

Explicación del Código

HTML: Añadimos 16 elementos div dentro del contenedor grid-container.
CSS:
- grid-template-columns: repeat(4, 1fr);: Define cuatro columnas de igual tamaño.
- grid-template-rows: repeat(4, 100px);: Define cuatro filas de 100px de altura cada una.
- grid-item:nth-child(n) { background-color: color; }: Aplica un color de fondo diferente a cada elemento grid utilizando el selector nth-child.

Conclusión

En esta lección, hemos introducido los conceptos básicos de CSS Grid y cómo crear un contenedor grid con filas y columnas. También hemos visto cómo aplicar estilos a los elementos grid y cómo centrar su contenido. En las próximas lecciones, profundizaremos en las propiedades avanzadas de CSS Grid y cómo utilizarlas para crear diseños complejos y responsivos.

Introducción a CSS Grid

Conceptos Clave de CSS Grid

Contenedor Grid y Elementos Grid

Definición de Filas y Columnas

Áreas de Grid

Alineación y Justificación

Ejemplo Básico de CSS Grid

HTML

CSS

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

HTML

CSS

Explicación del Código

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo