El diseño de cuadrícula CSS es una poderosa herramienta de diseño bidimensional que te permite controlar ambos ejes de diseño (filas y columnas) directamente. Aquí está cómo puedes usarlo:
1. Primero, debes establecer un contenedor como una cuadrícula. Para hacerlo, usas la propiedad CSS ‘display’ con el valor ‘grid’ o ‘inline-grid’.
Por ejemplo:
```css
.container {
display: grid;
}
```
2. A continuación, el Layout Grid se suministra con varias otras propiedades que te dan control sobre los elementos de la cuadrícula. Algunas de estas propiedades son `grid-template-columns`, `grid-template-rows`, `grid-column-gap`, `grid-row-gap`, `grid-gap` y muchas más.
Para establecer la cantidad de columnas y el tamaño de las mismas, usarías la propiedad `grid-template-columns`. Para establecer la cantidad de filas y el tamaño de las mismas, usarías la propiedad `grid-template-rows`.
Por ejemplo:
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
```
3. Para colocar elementos dentro de las celdas de la cuadrícula, puedes usar varias propiedades, como `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end` o en su lugar, puedes usar las propiedades shorthand `grid-column` y `grid-row`.
Por ejemplo:
```css
.item1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
```
Aquí `.item1` cubriría la primera y segunda columna y sólo la primera fila.
4. La propiedad `grid-gap` define el tamaño del espacio entre las celdas de la cuadrícula. Esto es útil para asignar un espacio regular y consistente entre los elementos de la cuadrícula.
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr; // two columns
grid-template-rows: 100px 200px; // two rows
grid-gap: 10px; // 10px gap between cells
}
```
Estos son algunos de los fundamentos básicos de cómo usar el diseño de cuadrícula CSS. Una vez que comprendas estos, puedes explorar muchas de las otras poderosas capacidades que tiene CSS Grid, ¡como áreas de cuadrícula, alineación de cuadrícula, colocación justificada y mucho más!
