Construir layouts reales combinando Grid y Flexbox. Aprender a estructurar una p谩gina con reader, main, sidebar y footer.
Objetivos
- Construir layouts reales combinando Grid y Flexbox.
- Aprender a estructurar una p谩gina con header, main, sidebar y footer.
- Crear layouts responsivos que se adapten a distintos dispositivos.
- Integrar componentes modernos en un dise帽o coherente.
馃敼 1. Layout b谩sico con Grid
css
.contenedor {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 3fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: sidebar; }
footer { grid-area: footer; }
馃憠 Estructura cl谩sica de p谩gina con sidebar.
馃敼 2. Responsividad con media queries
css
@media (max-width: 768px) {
.contenedor {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
馃憠 En m贸vil, el sidebar pasa debajo del contenido principal.
馃敼 3. Flexbox dentro de secciones
css
header {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 15px;
}
馃憠 Flexbox organiza logo y men煤 en el header.
馃敼 4. Ejemplo pr谩ctico: Tarjetas en Grid
css
.galeria {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.tarjeta {
background: #003366;
color: #fff;
padding: 20px;
border-radius: 10px;
}
馃憠 Galer铆a adaptable que reorganiza tarjetas seg煤n el espacio disponible.
馃敼 5. Combinaci贸n Grid + Flexbox
- Grid: estructura general de la p谩gina.
- Flexbox: alineaci贸n interna de componentes (men煤s, botones, iconos).
- Resultado: layouts modernos, flexibles y responsivos.
馃摑 Actividad pr谩ctica
- Crea un layout completo con header, main, sidebar y footer usando Grid.
- Haz que el header use Flexbox para alinear logo y men煤.
- Dise帽a una galer铆a de tarjetas con Grid que se adapte autom谩ticamente al ancho de pantalla.
Visitas:575