Diseño de una Layout Responsive

¿Cómo diseñar un Layout responsive con CSS GRID?

Video Diseño responsive con Grid CSS

Para diseñar una plantilla responsiva debemos seguir los siguientes pasos: Crear un div padre con divs hijos estructurando las áreas para aplicar css Grid

¿Cómo crear un Layout responsive con CSS GRID?

Para diseñar un template debemos tener en cuenta lo siguiente

  • Maquetación de una página web responsive usando CSS Grid
  • Uso de la propiedad grid-template y media queries para crear maquetados específicos para cada dispositivo.
  • Centrado del div principal con css clásico

 

Grid a diferencia del CSS flexbox que está diseñado manejar una sola dimensión ya sea horizontal como vertical, CSS Grid nos posibilita diseñar grillas donde podemos manejar tanto las filas como las columnas (2 dimensiones).

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DISEÑO CSS GRID</title>
    <style>
        body{ margin: 0; background: cadetblue;}
        .pagina{ 
            background: white;
            display: grid;
            height: 100vh;
            grid-template:
            "header" 100px
            "nav" 50px
            "contenido" auto
            "sidebar" 100px
            "footer" 100px

        }
        .pagina > div { border: 1px solid black}
        .header{ grid-area: header;}
        .nav{ grid-area: nav;}
        .contenido{ grid-area: contenido;}
        .sidebar{ grid-area: sidebar;}
        .footer{ grid-area: footer;}
        @media (min-width:900px){            
            .pagina{
                max-width: 1000px;
                margin: auto;
                grid-template:
                "header     header"     100px
                "nav        nav"        50px
                "sidebar    contenido"  auto                
                "footer     footer"     100px
                / 200px     1fr
            }
        }
        
    </style>
</head>
<body>
    <div class="pagina">
        <div class="header"> header </div>
        <div class="nav"> menu </div>
        <div class="contenido"> contenido </div>
        <div class="sidebar"> SIDEBAR </div>
        <div class="footer">PIE</div>
    </div>
</body>
</html>

 

No hay descargable

Redactado por: , Leido 1704 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021