EJERCICIO CSS GRID

Estructura Grid Principal

El grid se define en la clase .contenedor:

css
.contenedor {
    display: grid;              /* Activa Grid */
    grid-template-rows: auto 1fr; /* Define 2 filas */
    min-height: 100vh;           /* Altura mínima = toda la pantalla */
}

🏗️ Composición del Grid

text
┌─────────────────────────────────┐
│  FILA 1: auto (menú)            │
│  .menu                           │
│  Altura = según su contenido     │
├─────────────────────────────────┤
│  FILA 2: 1fr (contenido)        │
│  .contenido                      │
│  Ocupa el espacio restante       │
└─────────────────────────────────┘

📊 Distribución del Espacio

  1. Primera fila (auto):

    • El menú superior .menu

    • Su altura se ajusta automáticamente al contenido (en este caso, los links)

    • Si el menú crece, esta fila crece también

  2. Segunda fila (1fr):

    • El contenido principal .contenido

    • 1fr significa "1 fracción del espacio restante"

    • Ocupa TODO el espacio que sobra después del menú

    • La tabla se expande dentro de esta área

🎯 Ventajas de este Grid

  • Responsive automático: Al usar min-height: 100vh, siempre ocupa toda la pantalla

  • Flexible: Si el menú necesita más espacio (por ejemplo, si se añade más texto), la primera fila se adapta

  • Limpio: Solo necesitas 2 filas, sin necesidad de definir columnas

💡 Visualización Mental

Imagina que divides la pantalla en dos rectángulos horizontales:

  • El rectángulo superior contiene el menú (tamaño justo para los links)

  • El rectángulo inferior contiene todo lo demás (se estira hasta abajo)


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página con Grid</title>
   <style>
    /* estilos.css - VERSIÓN SUPER SENCILLA */

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

/* ===== CONTENEDOR PRINCIPAL CON GRID ===== */
.contenedor {
    display: grid;              /* Activamos Grid */
    grid-template-rows: auto 1fr; /* Dos filas: menú automático, contenido el resto */
    min-height: 100vh;           /* Ocupa toda la pantalla */
}

/* ===== MENÚ SUPERIOR ===== */
.menu {
    background-color: #333;      /* Fondo oscuro */
    padding: 15px;               /* Espacio interno */
    text-align: center;          /* Centrar el texto */
}

.menu a {
    color: white;                /* Texto blanco */
    text-decoration: none;       /* Quitar subrayado */
    margin: 0 15px;              /* Espacio entre links */
    font-size: 18px;             /* Tamaño de letra */
}

.menu a:hover {
    text-decoration: underline;  /* Subrayado al pasar el mouse */
}

/* ===== CONTENIDO PRINCIPAL ===== */
.contenido {
    padding: 20px;               /* Espacio alrededor */
    background-color: white;      /* Fondo blanco */
}

.contenido h2 {
    margin-bottom: 20px;          /* Espacio debajo del título */
    color: #333;
}

   </style>

   <style>
        /* ===== ESTILOS DE LA TABLA ===== */
    table {
        width: 100%;                  /* Que ocupe todo el ancho */
        border-collapse: collapse;    /* Bordes juntos */
        background-color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* Sombra ligera */
    }

    /* Bordes para celdas */
    th, td {
        border: 1px solid #ddd;       /* Borde gris claro */
        padding: 10px;                 /* Espacio interno */
        text-align: left;              /* Texto a la izquierda */
    }

    /* Encabezados */
    th {
        background-color: #4CAF50;    /* Fondo verde */
        color: white;                  /* Texto blanco */
        font-weight: bold;
    }
   </style>
</head>
<body>

    <!-- CONTENEDOR PRINCIPAL CON GRID -->
    <div class="contenedor">
       
        <!-- MENÚ SUPERIOR (sencillo) -->
        <div class="menu">
            <a href="#">Inicio</a>
            <a href="#">Productos</a>
            <a href="#">Ventas</a>
            <a href="#">Reportes</a>
        </div>
       
        <!-- CONTENIDO PRINCIPAL (la tabla) -->
        <div class="contenido">
            <h2>Lista de Productos</h2>
           
            <!-- TABLA NORMAL CON <table> -->
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Descripción</th>
                        <th>Sección</th>
                        <th>Gross</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>desenzilador das</td>
                        <td>henanienas</td>
                        <td>32.00</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>león bencetona</td>
                        <td>depotera</td>
                        <td>30.00</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>koo</td>
                        <td>depotera</td>
                        <td>13.43</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>alcoates</td>
                        <td>henanienas</td>
                        <td>22.50</td>
                    </tr>
         
                   
                 
               
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>

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