Dashboard Administrativo con CSS Grid
Los dashboards son interfaces que concentran información importante y controles en una sola vista. CSS Grid es perfecto para crear dashboards porque:
- Permite organizar widgets de diferentes tamaños en una cuadrícula coherente
- Facilita la reorganización del contenido según la importancia y el espacio disponible
- Ofrece control preciso sobre el posicionamiento de elementos
- Adapta el diseño a diferentes tamaños de pantalla manteniendo la usabilidad
En esta página, exploraremos cómo construir un dashboard administrativo completo utilizando las capacidades de CSS Grid.
Demostración de Dashboard Administrativo
Implementación del Dashboard con Grid
Estructura base del dashboard
El layout de dashboard utiliza una cuadrícula flexible que se adapta a diferentes tamaños de pantalla:
.dashboard-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto;
gap: 20px;
}
/* Posicionamiento de widgets */
.stats-widget {
grid-column: 1 / -1;
}
.chart-widget {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.tasks-widget {
grid-column: 3 / 5;
grid-row: 2 / 3;
}
.activity-widget {
grid-column: 3 / 4;
grid-row: 3 / 4;
}
.resources-widget {
grid-column: 4 / 5;
grid-row: 3 / 4;
}
.project-widget {
grid-column: 1 / -1;
grid-row: 4 / 5;
}
Adaptación para dispositivos móviles
En pantallas más pequeñas, reorganizamos los widgets para una mejor visualización:
@media (max-width: 992px) {
.dashboard-container {
grid-template-columns: repeat(2, 1fr);
}
.chart-widget {
grid-column: 1 / -1;
grid-row: auto;
}
.tasks-widget,
.activity-widget,
.resources-widget {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 576px) {
.dashboard-container {
grid-template-columns: 1fr;
}
.stats-widget .stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}
Patrones comunes en dashboards
Layout de métricas
Perfecto para mostrar KPIs y estadísticas importantes en la parte superior.
Layout de pantalla dividida
Navegación lateral fija con área de contenido principal scroll independiente.
Layout de widgets libres
Widgets de tamaño uniforme que se redistribuyen automáticamente.
Layout con áreas destacadas
Widget principal destacado con widgets secundarios a su alrededor.
Desafío
¿Te animas a mejorar este dashboard? Intenta:
- Añadir un widget con una visualización de datos diferente (gráfico circular, mapa de calor, etc.)
- Implementar funcionalidad drag-and-drop para reordenar widgets
- Crear un modo oscuro para el dashboard
- Añadir animaciones cuando los widgets se cargan o actualizan
Los dashboards son un excelente caso de uso para CSS Grid y permiten infinitas posibilidades de personalización.