Clase 13 - CSS Grid, Media y Container queries

#curso #css #grid #media-queries #container-queries

🔲 CSS Grid

Grid es un sistema de diseño bidimensional que permite crear layouts complejos con filas y columnas.

🔍 Conceptos básicos

Grid Container: El elemento padre que define una cuadrícula.
Grid Item: Los hijos directos del grid container.
Grid Line: Las líneas divisorias horizontales y verticales de la cuadrícula.
Grid Track: El espacio entre dos líneas adyacentes (filas o columnas).
Grid Cell: La intersección entre una fila y una columna.
Grid Area: Conjunto rectangular de celdas.

📦 Propiedades del Grid Container

.container {
  display: grid;
  /* o display: inline-grid; */

  /* Define columnas */
  grid-template-columns: 100px 200px 1fr;

  /* Define filas */
  grid-template-rows: auto 200px 100px;

  /* Espaciado entre celdas */
  gap: 20px;
  /* o column-gap y row-gap por separado */

  /* Alineación horizontal de items */
  justify-items: start | end | center | stretch;

  /* Alineación vertical de items */
  align-items: start | end | center | stretch;

  /* Alineación horizontal del grid completo */
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

  /* Alineación vertical del grid completo */
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

🧩 Propiedades de los Grid Items

.item {
  /* Posicionamiento específico */
  grid-column: 1 / 3; /* De la línea 1 a la 3 */
  grid-row: 2 / 4; /* De la línea 2 a la 4 */

  /* Forma abreviada de definir área */
  grid-area: 2 / 1 / 4 / 3; /* fila-inicio / columna-inicio / fila-fin / columna-fin */

  /* Alineación individual horizontal */
  justify-self: start | end | center | stretch;

  /* Alineación individual vertical */
  align-self: start | end | center | stretch;
}

⚙️ Funciones especiales

/* Repetición */
grid-template-columns: repeat(3, 1fr); /* 3 columnas de igual tamaño */

/* Tamaño mínimo y máximo */
grid-template-columns: minmax(100px, 1fr) 2fr 1fr;

/* Auto-fill y auto-fit */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

🔄 Patrones comunes

<div class="grid-container">
<header class="header">Encabezado</header>
<aside class="sidebar">Barra lateral</aside>
<main class="main-content">Contenido principal</main>
</div>

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

.header {
grid-column: 1 / -1; /* Ocupa todas las columnas */
}

.sidebar {
grid-column: 1 / span 3; /* Ocupa 3 columnas */
}

.main-content {
grid-column: 4 / -1; /* Desde la columna 4 hasta el final */
}

🏷️ Layout con áreas nombradas

HTML
CSS

<div class="grid-container">
<header class="header">Encabezado de la página</header>
<aside class="sidebar">Barra lateral</aside>
<main class="main">Contenido principal</main>
<footer class="footer">Pie de página</footer>
</div>

.grid-container {
display: grid;
grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

📱 Media Queries

Las media queries permiten aplicar estilos CSS específicos según características del dispositivo, como ancho, alto, resolución, etc.

📝 Sintaxis básica

HTML
CSS

<div class="container">
<div class="card">
    <img src="imagen.jpg" alt="Imagen del producto">
    <h3>Producto</h3>
    <p>Descripción del producto</p>
</div>
</div>

@media media-type and (media-feature) {
/* Reglas CSS */
}

🔤 Tipos de media

all: Todos los dispositivos
screen: Pantallas
print: Impresión
speech: Lectores de pantalla

🔎 Características más comunes

width, min-width, max-width: Ancho de la ventana
height, min-height, max-height: Alto de la ventana
orientation: Orientación del dispositivo (portrait/landscape)
aspect-ratio: Relación de aspecto
resolution: Resolución del dispositivo
hover: Si el dispositivo admite hover
prefers-color-scheme: Preferencia de tema (light/dark)

💻 Ejemplos

HTML
CSS

    <div class="container">
    <nav>Menú de navegación</nav>
    <main>Contenido principal</main>
    <aside>Barra lateral</aside>
    <footer>Pie de página</footer>
    </div>

/* Estilos para dispositivos con ancho menor a 768px */
@media screen and (max-width: 767px) {
.container {
    flex-direction: column;
}
}

/* Estilos para tablets */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.container {
    padding: 20px;
}
}

/* Estilos para desktop */
@media screen and (min-width: 1024px) {
.container {
    max-width: 1200px;
    margin: 0 auto;
}
}

/* Estilos para impresión */
@media print {
nav, footer {
    display: none;
}
}

/* Estilos para modo oscuro */
@media (prefers-color-scheme: dark) {
body {
    background-color: #121212;
    color: #ffffff;
}
}

📊 Puntos de ruptura comunes

/* Mobile first approach */
/* Estilos base para móviles */

/* Tablets (≥768px) */
@media screen and (min-width: 768px) {
  /* Estilos para tablets */
}

/* Desktops (≥992px) */
@media screen and (min-width: 992px) {
  /* Estilos para desktops */
}

/* Large desktops (≥1200px) */
@media screen and (min-width: 1200px) {
  /* Estilos para pantallas grandes */
}

🔀 Combinando Grid con Media Queries

HTML
CSS

<div class="grid-container">
<header class="header">Encabezado</header>
<main class="main">Contenido principal</main>
<aside class="sidebar">Barra lateral</aside>
<aside class="aside">Contenido adicional</aside>
<footer class="footer">Pie de página</footer>
</div>

.grid-container {
display: grid;
gap: 20px;

/* Layout móvil por defecto */
grid-template-columns: 1fr;
grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

/* Tablets */
@media screen and (min-width: 768px) {
.grid-container {
    grid-template-columns: 1fr 2fr;
    grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
}

/* Desktop */
@media screen and (min-width: 1024px) {
.grid-container {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}
}

📦 Container Queries

Las container queries permiten aplicar estilos a un elemento basándose en el tamaño de su contenedor, en lugar del viewport.

📝 Sintaxis básica (Container Queries)

HTML
CSS

<div class="container">
<article class="card">
    <img src="imagen.jpg" alt="Imagen del artículo">
    <h2>Título del artículo</h2>
    <p>Contenido del artículo</p>
    <a href="#" class="button">Leer más</a>
</article>
</div>

/* Definir el contenedor */
.container {
container-type: inline-size; /* o size para dimensiones en ambos ejes */
container-name: sidebar; /* Opcional: da un nombre al contenedor */
}

/* Consulta basada en el contenedor */
@container (min-width: 400px) {
.card {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
}

/* Con nombre específico */
@container sidebar (min-width: 600px) {
.widget {
    font-size: 1.2rem;
}
}

⚙️ Propiedades de definición de contenedor

container-type: Define el tipo de contenedor
- inline-size: Solo dimensiones en el eje inline (horizontal en idiomas LTR)
- size: Dimensiones en ambos ejes
- normal: Valor por defecto, no se crean consultas
container-name: Define un nombre para el contenedor
container: Abreviatura para container-type y container-name

🔍 Características consultables

width, min-width, max-width
height, min-height, max-height
inline-size, min-inline-size, max-inline-size
block-size, min-block-size, max-block-size
aspect-ratio

🌟 Ejemplo completo

HTML
CSS

    <div class="main-content">
    <article class="card">
        <div class="card__image">
        <img src="imagen.jpg" alt="Imagen destacada">
        </div>
        <h2 class="card__title">Título del artículo</h2>
        <div class="card__content">
        <p>Contenido del artículo que se adaptará según el espacio disponible.</p>
        </div>
    </article>

    <article class="card">
        <!-- Más cards... -->
    </article>
    </div>

    <div class="sidebar">
    <article class="card">
        <div class="card__image">
        <img src="sidebar-imagen.jpg" alt="Imagen sidebar">
        </div>
        <h3 class="card__title">Widget de sidebar</h3>
        <div class="card__content">
        <p>Contenido del widget.</p>
        </div>
    </article>
    </div>

    /* Definir varios contenedores */
    .main-content {
    container-type: inline-size;
    container-name: content;
    display: grid;
    gap: 20px;
    }

    .sidebar {
    container-type: inline-size;
    container-name: sidebar;
    }

    /* Card que se adapta al contenedor, no al viewport */
    .card {
    padding: 1rem;
    border: 1px solid #ccc;
    }

    /* Cuando el contenedor es suficientemente ancho */
    @container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 1rem;
    }

    .card__image {
        grid-row: span 2;
    }
    }

    /* Específico para cards dentro del sidebar */
    @container sidebar (min-width: 200px) {
    .card {
        background-color: #f0f0f0;
    }
    }

    /* Específico para cards dentro del contenido principal */
    @container content (min-width: 800px) {
    .card {
        padding: 1.5rem;
    }
    }

🎯 Casos de uso

Componentes verdaderamente reutilizables: Diseñar componentes que se adapten a cualquier espacio donde se coloquen.
Diseños adaptables a la estructura: Cambiar la disposición de elementos según el espacio disponible, independientemente del tamaño de pantalla.
Dashboards personalizables: Widgets que se adaptan a donde los coloca el usuario.
Diseños de artículos: Adaptación de imágenes y texto según el ancho del contenedor.

🛠️ Ejercicios de CSS Avanzado

🔲 Ejercicio 1: CSS Grid

Crea una galería de imágenes responsiva utilizando CSS Grid que muestre:

Una cuadrícula de 4 columnas en pantallas grandes
Imágenes con diferentes tamaños (algunas ocupando más celdas que otras)
Espaciado uniforme entre las imágenes
Las imágenes deben mantener sus proporciones sin distorsionarse

📱 Ejercicio 2: Media Queries

Diseña un menú de navegación que:

En escritorio muestre los elementos en línea horizontalmente
En tablets se transforme en un menú de dos filas
En móviles cambie a un menú hamburguesa desplegable
Incluya efectos de hover apropiados para cada tamaño de pantalla

👤 Ejercicio 3: Container Queries

Crea un componente de avatar de usuario que:

Cambie su diseño según el espacio disponible en su contenedor (no en la pantalla)
En contenedores pequeños muestre solo la imagen circular del usuario
En contenedores medianos añada el nombre del usuario junto a la imagen
En contenedores grandes muestre la imagen, nombre, rol y un botón de acción
Mantenga la misma apariencia visual independientemente del lugar donde se coloque en la página