Diferencias

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

--- informatica:diseno_web:css:grid [2024/03/04 13:45] – [Posicionamiento avanzado de los elementos] tempwin
+++ informatica:diseno_web:css:grid [2024/03/04 13:51] (actual) – [Número de pistas dinámico] tempwin
@@ Línea 97: / Línea 97: @@
   * ''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>
@@ Línea 104: / Línea 106: @@
 }
 </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.