Conferencia 15: CSS Grid: creación de diseños complejos con facilidad

En esta conferencia, nos sumergimos en CSS Grid, un poderoso sistema de diseño que le brinda control total sobre filas y columnas. Si bien Flexbox es excelente para diseños unidimensionales (ya sea filas o columnas), Grid le permite manejar diseños bidimensionales, lo que significa que puede diseñar diseños de páginas web completas con precisión.

1. ¿Qué es CSS Grid?

CSS Grid Layout, comúnmente conocido como Grid, es un sistema de diseño 2D diseñado para administrar filas y columnas simultáneamente. Puedes considerarlo como una matriz o una hoja de cálculo donde cada elemento se coloca en celdas de una cuadrícula, lo que permite diseños limpios y organizados.

2. Cómo crear una cuadrícula

Para comenzar a usar Grid, deberá definir un contenedor como una cuadrícula configurando display: grid. Luego, definirá el número de filas y columnas utilizando las propiedades grid-template-rows y grid-template-columns.

Ejemplo:

    
1
    
2
    
3
    
4

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px; /* space between the grid items */
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    text-align: center;
}

Esto crea una cuadrícula de 2x2, con cada celda de 100 px por 100 px y un espacio de 10 px entre las celdas.

3. Definición de áreas de cuadrícula

También puede definir áreas de cuadrícula específicas para que los elementos ocupen usando la propiedad del área de cuadrícula. Esto le permite controlar exactamente dónde se colocará un elemento dentro de la cuadrícula.

Ejemplo:

    
Header
    
Sidebar
    
Main Content
    
Footer

.grid-container {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

Este ejemplo crea un diseño básico donde el encabezado y el pie de página se extienden a lo largo de dos columnas, y la barra lateral y el contenido principal ocupan sus propias columnas. La propiedad grid-template-areas le permite definir la estructura del grid con nombres para cada área.

4. Ajuste automático y relleno automático para cuadrículas responsivas

Una de las mejores partes de CSS Grid es lo fácil que es hacerlo responsivo. Las propiedades de ajuste automático y autocompletar pueden ajustar automáticamente la cantidad de columnas según el espacio disponible.

Ejemplo:

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

En este ejemplo, la cuadrícula creará automáticamente tantas columnas como quepan dentro del contenedor, y cada columna tendrá al menos 150 px de ancho. Si hay espacio adicional, las columnas se estirarán para llenar el área restante.

5. Alineación de cuadrícula

Puedes alinear elementos dentro de la cuadrícula usando justify-items y align-items.

• justify-items: alinea los elementos horizontalmente dentro de sus celdas de la cuadrícula.
• align-items: Alinea elementos verticalmente dentro de sus celdas de la cuadrícula.

Ejemplo:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.item {
    background-color: #FF5722;
    padding: 20px;
    color: white;
    text-align: center;
}

Esto centrará todos los elementos tanto horizontal como verticalmente dentro de sus celdas de la cuadrícula.

6. Cuadrículas anidadas

CSS Grid también admite cuadrículas anidadas, lo que le permite crear cuadrículas dentro de elementos de la cuadrícula para diseños más complejos.

Ejemplo:

    

        

            
Nested 1
            
Nested 2
        
    
    
Item 2
    
Item 3

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.nested-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.nested-item {
    background-color: #FFC107;
    padding: 10px;
    color: black;
}

En este ejemplo, uno de los elementos de la cuadrícula contiene una cuadrícula anidada, lo que permite diseños más flexibles y detallados.

7. Grid versus Flexbox: cuándo usar cada uno

• Utilice Flexbox cuando necesite administrar el diseño de elementos en una dirección (ya sea filas o columnas).
• Utilice Grid cuando necesite administrar filas y columnas simultáneamente para diseños complejos y multidimensionales.

Conclusión

CSS Grid cambia las reglas del juego para el diseño web y ofrece una forma poderosa de crear diseños complejos y responsivos con el mínimo esfuerzo. Ya sea que esté trabajando en el diseño de un blog, un panel o la estructura de un sitio web, Grid le brinda la flexibilidad de controlar tanto las filas como las columnas con facilidad.

sígueme en LinkedIn

Ridoy Hasán