Intermediocss
CSS Grid
Domina el sistema de layout bidimensional para crear composiciones complejas con filas y columnas.
Fundamentos de Grid
CSS Grid es un sistema de layout bidimensional que permite controlar filas y columnas simultaneamente. Es ideal para layouts de pagina completos y grids de contenido.
css
1.dashboard {
2 display: grid;
3 grid-template-columns: 250px 1fr;
4 grid-template-rows: 60px 1fr 40px;
5 gap: 1rem;
6 min-height: 100vh;
7}
8
9.header { grid-column: 1 / -1; }
10.sidebar { grid-row: 2 / 3; }
11.main { grid-row: 2 / 3; }
12.footer { grid-column: 1 / -1; }Grid responsivo
La funcion
repeat(auto-fit, minmax()) crea grids que se adaptan automaticamente al espacio disponible sin media queries.css
1/* Grid de cards auto-responsivo */
2.cards {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
5 gap: 1.5rem;
6 padding: 1rem;
7}
8
9/* Grid con areas nombradas */
10.layout {
11 display: grid;
12 grid-template-areas:
13 "header header"
14 "nav main"
15 "footer footer";
16 grid-template-columns: 200px 1fr;
17}
18
19.header { grid-area: header; }
20.nav { grid-area: nav; }
21.main { grid-area: main; }
22.footer { grid-area: footer; }