Grid detalles
**CSS Grid** es un sistema de diseño en CSS que permite crear layouts complejos utilizando una cuadrícula bidimensional. A diferencia de Flexbox, que opera principalmente en un solo eje, CSS Grid permite controlar tanto filas como columnas simultáneamente, lo que lo hace ideal para layouts más estructurados y complejos.
### 1. **Conceptos Básicos**
CSS Grid organiza el espacio dentro de un contenedor en una cuadrícula, formada por filas y columnas. Los elementos hijos dentro de este contenedor se alinean en esta cuadrícula de acuerdo con las reglas definidas.
### 2. **Atributos que se usan solo en el contenedor (Contenedor Grid)**
Estos atributos se aplican directamente al contenedor de la cuadrícula y controlan la disposición de las filas y columnas, así como la alineación general de los elementos dentro de la cuadrícula:
- **`display: grid;`**: Define el contenedor como una cuadrícula.
- **`grid-template-columns`**: Define la estructura de las columnas en la cuadrícula.
- Ejemplo: `grid-template-columns: 1fr 2fr 1fr;` (define tres columnas, la primera y tercera con la misma anchura, y la segunda con el doble de anchura).
- **`grid-template-rows`**: Define la estructura de las filas en la cuadrícula.
- Ejemplo: `grid-template-rows: 100px auto 100px;` (define tres filas, la primera y última de 100px y la del medio ajustable).
- **`grid-template-areas`**: Permite asignar nombres a las áreas de la cuadrícula, facilitando la disposición de los elementos.
- Ejemplo:
```css
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
```
- **`grid-template`**: Es una forma abreviada para definir tanto `grid-template-rows`, `grid-template-columns`, y `grid-template-areas`.
- Ejemplo: `grid-template: "header header" 50px "main sidebar" 1fr / 2fr 1fr;`.
- **`grid-column-gap`, `grid-row-gap`** y **`gap`**: Define el espacio entre las columnas (`grid-column-gap`), entre las filas (`grid-row-gap`) o ambos (`gap`).
- Ejemplo: `gap: 10px;` (define un espacio de 10px entre todas las filas y columnas).
- **`justify-items`**: Alinea los elementos hijos a lo largo del eje horizontal (dentro de sus celdas).
- Valores: `start`, `end`, `center`, `stretch` (predeterminado).
- **`align-items`**: Alinea los elementos hijos a lo largo del eje vertical (dentro de sus celdas).
- Valores: `start`, `end`, `center`, `stretch` (predeterminado).
- **`justify-content`**: Alinea toda la cuadrícula dentro del contenedor a lo largo del eje horizontal.
- Valores: `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`.
- **`align-content`**: Alinea toda la cuadrícula dentro del contenedor a lo largo del eje vertical.
- Valores: `start`, `end`, `center`, `space-between`, `space-around`, `space-evenly`.
### 3. **Atributos que se usan solo en los elementos (Items Grid)**
Estos atributos se aplican a los elementos hijos dentro de la cuadrícula, permitiendo controlar su ubicación y tamaño en la cuadrícula:
- **`grid-column`**: Define en qué columna comienza un elemento y cuántas columnas ocupa.
- Ejemplo: `grid-column: 1 / 3;` (el elemento comienza en la columna 1 y ocupa hasta la columna 3).
- **`grid-row`**: Define en qué fila comienza un elemento y cuántas filas ocupa.
- Ejemplo: `grid-row: 2 / 4;` (el elemento comienza en la fila 2 y ocupa hasta la fila 4).
- **`grid-area`**: Asigna un área de la cuadrícula a un elemento, utilizando nombres definidos en `grid-template-areas`.
- Ejemplo: `grid-area: header;`.
- **`justify-self`**: Alinea un elemento individual a lo largo del eje horizontal (dentro de su celda).
- Valores: `start`, `end`, `center`, `stretch`.
- **`align-self`**: Alinea un elemento individual a lo largo del eje vertical (dentro de su celda).
- Valores: `start`, `end`, `center`, `stretch`.
### 4. **Ejemplo Práctico**
Imagina que tienes un contenedor con varios elementos dentro:
```html
<div class="grid-contenedor">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
```
Y el siguiente CSS:
```css
.grid-contenedor {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
grid-template-columns: 1fr 2fr;
grid-template-rows: 50px 1fr 30px;
gap: 10px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
}
```
- En este caso, el contenedor tiene `display: grid;`, lo que activa CSS Grid. Las áreas de la cuadrícula se definen con `grid-template-areas`, y los elementos individuales se colocan en estas áreas usando la propiedad `grid-area`.
- Las columnas se dividen
Comentarios
Publicar un comentario