Sobes.tech
Junior

¿Se puede usar CSS Grid y Flexbox juntos?

sobes.tech AI

Respuesta de la IA

Sí, CSS Grid y Flexbox se pueden usar juntos, y a menudo incluso se recomienda hacerlo para crear diseños complejos y adaptativos.

  • CSS Grid es excelente para construir la estructura general de la página, por ejemplo, para colocar las áreas principales (cabecera, barra lateral, contenido, pie de página).
  • Flexbox es mejor para alinear y distribuir elementos dentro de esas áreas, por ejemplo, para menús, botones, tarjetas.

Ejemplo:

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  height: 100vh;
}
.sidebar {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.content {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

De esta manera, Grid establece la cuadrícula principal, y Flexbox gestiona la disposición de los elementos dentro de las celdas.