Diseño responsive con Grid CSS
¿Cómo diseñar un Layout responsive con CSS GRID?
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
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>
Descarga código fuente 118
No hay descargable
Redactado por: , Leido 2768 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022