CSS Grid
## Objetivos de Aprendizaje
- Entender el modelo de diseño grid
- Crear contenedores e items grid
- Dominar las propiedades de plantilla de grid
- Crear diseños grid responsivos
## Visión General de Grid
CSS Grid es un sistema de diseño bidimensional para filas y columnas.
```html
```
```css
.grid-container {
display: grid;
}
```
## Propiedades del Contenedor Grid
### display
```css
.grid-container {
display: grid;
display: inline-grid; /* Contenedor grid en línea */
}
```
### grid-template-columns y rows
```css
/* Columnas fijas */
.grid {
grid-template-columns: 100px 100px 100px;
}
/* Columnas flexibles */
.grid {
grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}
/* Mixto */
.grid {
grid-template-columns: 200px 1fr 1fr;
}
/* Función repeat */
.grid {
grid-template-columns: repeat(3, 1fr);
}
/* Auto-fit */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```
### grid-template-rows
```css
.grid {
grid-template-rows: 100px 200px auto;
}
```
### grid-template-areas
```css
.grid {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
/* Referenciar áreas en items */
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
```
### gap
```css
.grid {
gap: 20px; /* Espacio entre filas y columnas */
gap: 10px 20px; /* Espacio de fila, espacio de columna */
row-gap: 10px;
column-gap: 20px;
}
```
### justify-items
Alinea elementos horizontalmente dentro de sus celdas:
```css
.grid {
justify-items: stretch; /* Llena la celda (por defecto) */
justify-items: start;
justify-items: center;
justify-items: end;
}
```
### align-items
Alinea elementos verticalmente dentro de sus celdas:
```css
.grid {
align-items: stretch; /* Llena la celda (por defecto) */
align-items: start;
align-items: center;
align-items: end;
}
```
### justify-content
Alinea toda la grilla horizontalmente:
```css
.grid {
justify-content: start; /* Grilla a la izquierda */
justify-content: center; /* Grilla centrada */
justify-content: end; /* Grilla a la derecha */
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
```
### align-content
Alinea toda la grilla verticalmente:
```css
.grid {
align-content: start;
align-content: center;
align-content: end;
align-content: space-between;
}
```
## Propiedades de Elementos Grid
### grid-column y grid-row
```css
.item {
/* Span múltiples columnas */
grid-column: 1 / 3; /* Inicia en línea 1, termina en línea 3 */
grid-column: 1 / span 2; /* Inicia en línea 1, span 2 columnas */
grid-column: 1; /* Inicia en línea 1 (grid-column: 1 / 2) */
grid-column: -1; /* Última columna */
/* Span múltiples filas */
grid-row: 1 / 3;
grid-row: 1 / span 2;
}
```
### grid-area
```css
.item {
grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */
}
```
### justify-self
```css
.item {
justify-self: start;
justify-self: center;
justify-self: end;
justify-self: stretch;
}
```
### align-self
```css
.item {
align-self: start;
align-self: center;
align-self: end;
align-self: stretch;
}
```
### order
```css
.item {
order: 0; /* Por defecto */
order: -1; /* Se mueve al frente */
}
```
## Líneas Nombradas
```css
.grid {
grid-template-columns: [full-start] 1fr [content-start] 3fr [content-end] 1fr [full-end];
}
.full-width {
grid-column: full-start / full-end;
}
.content {
grid-column: content-start / content-end;
}
```
## Auto-colocación
```css
.grid {
grid-auto-flow: row; /* Llena filas primero (por defecto) */
grid-auto-flow: column; /* Llena columnas primero */
grid-auto-flow: dense; /* Llena huecos en el diseño */
}
```
### Auto-fill y Auto-fit
```css
/* Auto-fill: crea tantas columnas como quepan */
.grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* Auto-fit: expande columnas para llenar el espacio */
.grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
```
## Diseños Comunes
### Diseño Holy Grail
```css
.grid-container {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr 200px;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
```
### Cuadrícula de Tarjetas
```css
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
```
### Diseño de Revista
```css
.magazine {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.featured {
grid-column: 1 / 7;
grid-row: 1 / 3;
}
.secondary1 {
grid-column: 7 / 10;
}
.secondary2 {
grid-column: 10 / 13;
}
```
## Grid Responsivo
```css
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 600px) {
.responsive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 900px) {
.responsive-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.responsive-grid {
grid-template-columns: repeat(4, 1fr);
}
}
```
## Soporte de Navegadores
CSS Grid es compatible con todos los navegadores modernos.
```css
.grid {
display: -ms-grid; /* IE 10, 11 */
display: grid;
}
```
## Resumen
- Grid: diseño bidimensional con `display: grid`
- `grid-template-columns` y `grid-template-rows` definen tamaños de pista
- Las unidades `fr` son fracciones flexibles del espacio disponible
- `grid-column` y `grid-row` posicionan elementos
- `grid-template-areas` crea regiones de plantilla nombradas
- `repeat(auto-fit, minmax())` crea auto-colocación responsiva
- `justify-items`/`align-items` alinean elementos en celdas
- `justify-content`/`align-content` alinean toda la grilla
1
2
3
4
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →