Esta es una demostración hecha con Astro del poder del grid de CSS para crear una estructura de rejilla responsive sin usar demasiadas media queries, con tal sólo una línea de CSS:
.autogrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}En la parte inferior de la pantalla hay un componente que muestra la anchura de la ventana, que viene de perlas para los dispositivos móviles como smartphones y tablets.
El enlace de la demostración está en el enlace de la derecha, que está alojada en GitHub Pages.
Todos los comandos se ejecutan desde la raíz del proyecto, desde la terminal:
| Comando | Acción |
|---|---|
npm install |
Instala las dependencias |
npm run dev |
Arranca el servidor de desarrollo en localhost:4321 |
npm run build |
Construye la versión de producción en ./dist/ |
npm run preview |
Previsualiza la versión de despliegue en local, antes del despliegue |
npm run astro ... |
Ejecuta comandos de la CLI como astro add, astro check |
npm run astro -- --help |
Obtener ayuda de la CLI de Astro |