PADRE MANDA SOBRE LOS HIJOS DIRECTOS

 <!DOCTYPE html>

<html>
<head>
<style>
    /* Vamos a experimentar */
    .card {
        display: grid;
        width: 300px;
        border: 3px solid red;
        margin: 20px;
    }
   
    .header { background: yellow; }
    .body { background: lightblue; }
    .footer { background: lightgreen; }
   
    /* DIFERENTES CONFIGURACIONES - PRUEBA CADA UNA */
    .ejemplo1 {
        grid-template-rows: 50px 100px 80px;  /* Tamaños fijos */
    }
   
    .ejemplo2 {
        grid-template-rows: auto auto auto;   /* Automático */
    }
   
    .ejemplo3 {
        grid-template-rows: 60px 1fr 40px;    /* Mezcla: fijo + flexible + fijo */
        height: 300px;
    }
   
    /* Espaciado para ver mejor */
    .caja {
        padding: 15px;
        border: 1px solid black;
    }
</style>
</head>
<body>
    <h2>🔵 EL PADRE MANDA SOBRE LOS HIJOS DIRECTOS</h2>
   
    <!-- EJEMPLO 1: Tamaños fijos -->
    <h3>Ejemplo 1: Tamaños fijos (50px, 100px, 80px)</h3>
    <div class="card ejemplo1">
        <div class="header caja">HIJO 1: Header</div>
        <div class="body caja">HIJO 2: Body</div>
        <div class="footer caja">HIJO 3: Footer</div>
    </div>
   
    <!-- EJEMPLO 2: Auto -->
    <h3>Ejemplo 2: auto auto auto (cada uno su espacio justo)</h3>
    <div class="card ejemplo2">
        <div class="header caja">HIJO 1: Header corto</div>
        <div class="body caja">HIJO 2: Body con mucho mucho mucho mucho mucho mucho texto para que veas cómo se expande</div>
        <div class="footer caja">HIJO 3: Footer</div>
    </div>
   
    <!-- EJEMPLO 3: Mezcla -->
    <h3>Ejemplo 3: 60px 1fr 40px (body flexible)</h3>
    <div class="card ejemplo3">
        <div class="header caja">HIJO 1: 60px fijos</div>
        <div class="body caja">HIJO 2: 1fr (ocupa lo que sobra)</div>
        <div class="footer caja">HIJO 3: 40px fijos</div>
    </div>
   
    <div style="margin-top: 30px; padding: 20px; background: #f0f0f0;">
        <h3>📌 REGLAS DE ORO:</h3>
        <ul>
            <li><strong>El padre</strong> (quien tiene display:grid) es el que manda</li>
            <li><strong>Los hijos directos</strong> son los que obedecen</li>
            <li>Los nietos (cosas dentro de los hijos) NO los controla el grid del abuelo</li>
            <li>grid-template-rows define la altura de CADA hijo (en orden: hijo1, hijo2, hijo3...)</li>
        </ul>
    </div>
</body>
</html>

Comentarios

Entradas más populares de este blog

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

layouts

Proyecto Práctico: Tarjeta de Perfil