Uso de Flexbox y CSS Grid en Componentes Web

¿Flexbox o CSS Grid?

En el mundo del diseño web, la elección entre Flexbox y CSS Grid puede convertirse en un debate apasionante. Estos dos sistemas de diseño CSS son herramientas poderosísimas, cada una con sus propias fortalezas y usos ideales. La habilidad para discernir cuándo utilizar cada una es esencial para cualquier desarrollador front-end. En esta clase, exploramos una dinámica divertida que te ayuda a decidir entre estos dos.

¿Cómo se comparan Flexbox y CSS Grid?

• Flexbox está diseñado principalmente para diseños unidimensionales. Es excelente para alinear elementos a lo largo de un eje, ya sea horizontal o vertical, y es una opción preferida para layouts más simples y componentes internos.

• CSS Grid, por otra parte, facilita la creación de layouts bidimensionales complejos. Es perfecto para diseños que necesitan un control más detallado sobre filas y columnas.

La clave es observar no solo el diseño visual, sino también cómo se organiza el HTML desde el inicio. Ambos, Flexbox y CSS Grid, requieren un marcado HTML estructurado de manera complementaria.

¿Cómo implementamos Flexbox para un App Bar Top?

Para este ejercicio, visualizamos un App Bar Top y nos preguntamos si Flexbox o CSS Grid sería la mejor opción. Al analizar el elemento, es evidente que Flexbox podría ser más sencillo gracias a su naturaleza unidimensional.

Estructura HTML:

<nav>
    <div class="nav-menu">
        <span>Page Title</span>
    </div>
    <div class="nav-icons">
        <!-- Íconos -->
    </div>
</nav>

Estilo CSS:

nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
}

.nav-menu, .nav-icons {
    display: flex;
    align-items: center;
}

Este enfoque con Flexbox permite que el título y los íconos se distribuyan equitativamente en el espacio del App Bar. justify-content: space-between asegura que haya un espacio adecuado entre cada elemento hijo.

¿Cómo lo adaptamos con CSS Grid?

Supongamos que decides emplear CSS Grid. Aunque es más avanzada para diseños complejos, aún puede manejar el App Bar Top mediante la creación de un diseño de cuadrícula específico.

Estilo CSS usando Grid:

nav {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 20px;
}

.nav-menu {
    grid-column: span 3;
}

.nav-icons {
    grid-column: span 5;
}

Con Grid se obtienen controles precisos para decidir dónde comienza o termina cada elemento, utilizando grid-column.

¿Cómo decides para un diálogo entre ambas?

Ahora, enfrentándonos a la decisión entre Flexbox y Grid para un componente de diálogo, consideramos la estructura interna compleja que puede beneficiarse de CSS Grid.

Estructura HTML:

<section class="dialog">
    <h1>Título</h1>
    <p>Texto principal</p>
    <div class="actions">
        <button>Btn 1</button>
        <button>Btn 2</button>
    </div>
</section>

Estilo CSS con Grid:

section.dialog {
    display: grid;
    grid-template-areas: 
        "header"
        "text"
        "actions";
    grid-gap: 10px;
}

.actions {
    grid-area: actions;
    justify-self: end;
}

La capacidad de definir áreas dentro de CSS Grid se destaca aquí, permitiendo un diseño claro y efectivo del diálogo.

¡Comparte tus experimentos!

Después de experimentar con ambos Flexbox y CSS Grid, la mejor manera de aprender es practicando. Te animo a que tomes estas bases y construyas tus propios diseños. ¿En qué casos prefieres Flexbox? ¿Cuándo sientes que CSS Grid es la opción superior? La práctica individual te permitirá descubrir más matices y ganar seguridad en tus elecciones de diseño. ¡Sigue explorando y sigue creando!