Diferencias

Muestra las diferencias entre dos versiones de la página.

--- informatica:diseno_web:css:grid [2024/03/04 13:33] – [Uso] tempwin
+++ informatica:diseno_web:css:grid [2024/03/04 13:51] (actual) – [Número de pistas dinámico] tempwin
@@ Línea 94: / Línea 94: @@
 </code>
+===== Rejillas implícitas =====
+  * ''grid-auto-flow''
+Para definir una rejilla implícita, estableceremos el flujo automático de elementos en filas y permitiremos que rellenen huecos cambiando el orden si es necesario (''dense''):
+<code css>
+main {
+    display: grid;
+    grid-auto-flow: row dense;
+}
+</code>
+===== Número de pistas dinámico =====
+<code css>
+grid-template-columns: repeat(auto-fit, 350px);
+</code>
+Con ''auto-fit'' estamos indicando que se calcule el número de columnas necesario para rellenar los espacios.
+Tamaño de pistas dinámico:
+<code css>
+grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+</code>
+Esto nos definirá cuantas columnas sean necesarias de idéntico ancho de forma que rellenen el contenedor.