Diferencias

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

--- informatica:diseno_web:css:grid [2024/03/04 12:57] – creado tempwin
+++ informatica:diseno_web:css:grid [2024/03/04 13:51] (actual) – [Número de pistas dinámico] tempwin
@@ Línea 4: / Línea 4: @@
 El sistema Grid permite definir una cuadrícula bidimensional
+  * [[https://caniuse.com/#search=grid|Soporte de Grid en navegadores]]
+===== Uso =====
+Para usar grid, se utiliza la propiedad ''display'' con el valor ''grid'' en el elemento que haga de contenedor:
+<code css>
+body {
+    display: grid;
+}
+</code>
+Si fueran varios cojntenedores grid para mostrar en línea: ''display: inline-grid''.
+A continuación es necesario espeficiar una plantilla de columnas o filas. Si queremos 12 columnas de igual tamaño:
+<code css>
+body {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+}
+</code>
+Para las filas, usaríamos ''grid-template-rows''.
+<WRAP center round info 60%>
+La unidad ''fr'' indica cuántas "fracciones" del ancho total ocupará un columna o fila
+</WRAP>
+==== Tamaño de los elementos ====
+  * ''grid-column-start''
+  * ''grid-column-end''
+  * ''grid-column'' es una combinación de las dos anteriores
+Si tenemos una rejilla de 12 columnas y queremos que un elemento ocupe 3 columnas:
+<code css>
+.feature {
+    grid-column-end: span 3;
+}
+</code>
+==== Posicionamiento avanzado de los elementos ====
+<code css>
+body {
+    display: grid;
+    grid-template-areas:
+        "title  title .   .    ."
+        ".      date  .   desc desc"
+        "attend .     .   desc desc"
+        ".      img   img .    ."
+        ".      img   img .    footer";
+}
+</code>
+<WRAP center round info 60%>
+El espacio en blanco indica separación entre columnas. Para describir celdas vacías es convención utilizar el punto (''.'')
+</WRAP>
+Habremos construidos una cuadrícula de 5 columnas y 5 filas. Para indicar qué elemento se colocará dónde, le indicamos el nombre del área que usamos en la plantilla:
+<code css>
+h1 {
+    grid-area: title;
+}
+time {
+    grid-area: date;
+}
+.desc {
+    grid-area: desc;
+}
+.attend {
+    grid-area: attend;
+}
+.img {
+    grid-area: img;
+}
+footer {
+    grid-area: footer;
+}
+</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.