Aprendamos sobre lo más emocionante que ha llegado al diseño web front-end en mucho tiempo. Esa es la tecnología de CSS Grid. CSS Grid es un nuevo conjunto de tecnologías que permite a los diseñadores y desarrolladores web incorporar potentes técnicas de diseño de páginas en la web. Tradicionalmente, el diseño de páginas de la web ha sido una práctica extremadamente desafiante. En el pasado, es posible que hayamos usado tablas, divs, capas, todo tipo de trucos CSS y, en última instancia, marcos CSS como Foundation, Bootstrap y otros. Ahora tenemos CSS Grid, una herramienta de diseño bidimensional muy poderosa para colocar elementos en páginas web. Puede crear casi cualquier diseño que se le ocurra con CSS Grid. Echemos un vistazo a algunos ejemplos de cómo funciona CSS Grid ahora.
Contenedor de rejilla
Lo primero que queremos hacer es configurar un contenedor de cuadrícula. Hacemos esto estableciendo la displaypropiedad en grid. Cualquier hijo directo de un contenedor de cuadrícula definido ahora es automáticamente elementos de cuadrícula.
pantalla: cuadrícula;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <style> .grid-container { display: grid; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> </div> </body> </html> |
Observe que cuando establecemos displayen grid, los elementos aparecen como filas apiladas que abarcan todo el ancho del contenedor. Aquí tenemos algunas imágenes con números como ejemplo. Puede ver las líneas de la cuadrícula ya que las hemos activado en Firefox para una fácil visualización.
pantalla: cuadrícula en línea;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <style> .grid-container { display: inline-grid; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> </div> </body> </html> |
En el caso de que displayse establezca en inline-grid, observe que los elementos de la cuadrícula solo abarcan el ancho del contenido.
Cuadrícula explícita
Una vez que tenemos el contenedor configurado, las columnas y filas se pueden definir explícitamente usando las propiedades grid-template-rowsy grid-template-columns.
rejilla-plantilla-filas
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: 50px 75px; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> </div> </body> </html> |
Aquí, la primera fila tiene explícitamente una altura de 50 píxeles y la segunda fila tiene una altura de 75 píxeles. Todas las demás filas simplemente usan la altura del contenido que contienen. En nuestro caso, son imágenes de 100 px por 100 px.
columnas-plantilla-cuadrícula
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: 100px 100px; grid-template-columns: 100px 100px 100px; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> </div> </body> </html> |
Ahora tenemos 2 filas y 3 columnas, todas con una altura y un ancho exactos de 100 píxeles.
fr en filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> </div> </body> </html> |
Las unidades fraccionarias son una excelente manera de permitir que el navegador divida automáticamente el espacio libre en partes iguales. Este ejemplo muestra dos filas de partes iguales y tres columnas de dimensiones iguales. Las imágenes tienen solo 100 px por 100 px, por lo que comienzan a la izquierda en cada celda de la cuadrícula por defecto.
Tamaño de pista de cuadrícula mínimo y máximo
Puede usar la función minmax () para crear pistas de cuadrícula que usan el espacio disponible, pero que no se reducen más que un tamaño definido ni crecen más allá de un tamaño definido.
La función minmax ()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: minmax(100px,150px) 1fr; grid-template-columns: 1fr 1fr 1fr; } </style> </head> <body> <div class="grid-container"> <img src="200x200.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="200x200.png"> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: minmax(100px,auto) 1fr minmax(100px,auto); } </style> </head> <body> <div class="grid-container"> <img src="200x200.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="200x200.png"> </div> </body> </html> |
Al combinar las unidades minmax () y fr, uno puede crear todo tipo de diseños receptivos que ya no necesitan hacer uso de múltiples consultas de medios en el navegador.
Repetición de pistas de cuadrícula
En lugar de tener que definir explícitamente cada fila o columna, puede usar la función repeat () para decir cuántas filas o columnas le gustaría.
La función repeat ()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> <img src="7.png"> <img src="8.png"> <img src="9.png"> </div> </body> </html> |
Canaletas con brecha de rejilla
De forma predeterminada, no hay ningún espacio entre filas y columnas. Puede definir espacios en blanco entre filas y columnas usando grid-gap. Tenga en cuenta que no puede aplicar ningún estilo a las canaletas. Estos son solo para espacios en blanco.
brecha de red
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> <img src="7.png"> <img src="8.png"> <img src="9.png"> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); grid-row-gap: 5px; grid-column-gap: 20px; } </style> </head> <body> <div class="grid-container"> <img src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <img src="6.png"> <img src="7.png"> <img src="8.png"> <img src="9.png"> </div> </body> </html> |
Colocación de elementos mediante números de línea de cuadrícula
Lo que hace que CSS Grid sea muy poderoso es la capacidad de colocar contenido exactamente donde lo desea. A continuación, se muestran algunos ejemplos de cómo colocar imágenes en ubicaciones precisas en la cuadrícula.
grid-row-start (end) grid-column-start (end)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } .a { grid-row-start: 2; grid-row-end: 3; grid-column-start: 3; grid-column-end: 4; } </style> </head> <body> <div class="grid-container"> <img class="a" src="1.png"> <img class="b" src="2.png"> <img class="c" src="3.png"> <img class="d" src="4.png"> <img class="e" src="5.png"> <img class="f" src="6.png"> </div> </body> |
Cómo distribuir elementos en filas y columnas
En estos ejemplos, agregaremos algunos elementos div con algunos colores de fondo para mostrar cómo los elementos de la cuadrícula se pueden hacer para abarcar múltiples filas o columnas como desee.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } .a { grid-column-start: 1; grid-column-end: 4; } </style> </head> <body> <div class="grid-container"> <div class="a"><img class="a" src="1.png"></div> <div class="b"><img class="b" src="2.png"></div> <div class="c"><img class="c" src="3.png"></div> <div class="d"><img class="d" src="4.png"></div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); } .a { grid-row-start: 1; grid-row-end: 3; } </style> </head> <body> <div class="grid-container"> <div class="a"><img class="a" src="1.png"></div> <div class="b"><img class="b" src="2.png"></div> <div class="c"><img class="c" src="3.png"></div> <div class="d"><img class="d" src="4.png"></div> <div class="e"><img class="e" src="5.png"></div> </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } .a { grid-row: 2 / 4; grid-column: 2 / 4; } </style> </head> <body> <div class="grid-container"> <div class="a"><img class="a" src="1.png"></div> <div class="b"><img class="b" src="2.png"></div> <div class="c"><img class="c" src="3.png"></div> <div class="d"><img class="d" src="4.png"></div> <div class="e"><img class="e" src="5.png"></div> <div class="f"><img class="f" src="6.png"></div> </div> </body> </html> |
Líneas de cuadrícula con nombre
Es posible asignar nombres a las líneas de la cuadrícula cuando se definen utilizando columnas de plantilla de cuadrícula y filas de plantilla de cuadrícula. Una vez que una línea tiene un nombre, se puede hacer referencia a ella al intentar colocar un elemento en la cuadrícula. Aquí configuramos algunos nombres para las líneas de fila y columna. Una vez en su lugar, colocamos un elemento de la cuadrícula haciendo referencia a los nombres que proporcionamos y no a los números de línea reales.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html> <head> <style> .grid-container { display: grid; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; } .a { grid-row-start: row-2-start; grid-row-end: row-end; grid-column-start: col-1-start; grid-column-end: col-end; } </style> </head> <body> <div class="grid-container"> <div class="a"><img class="a" src="1.png"></div> <div class="b"><img class="b" src="2.png"></div> <div class="c"><img class="c" src="3.png"></div> <div class="d"><img class="d" src="4.png"></div> </div> </body> </html> |
Cómo nombrar y colocar áreas de cuadrícula
Un método alternativo que puede utilizar para colocar elementos en la cuadrícula implica colocar elementos utilizando las denominadas áreas de plantilla con nombre. Este enfoque es realmente genial por la forma en que funciona y, a menudo, se lo conoce como un tipo de diseño de cuadrícula de método ascii-art.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <style> .grid-container { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 300px 100px; grid-template-columns: 1fr 200px; } </style> </head> <body> <div class="grid-container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
¡Ok, eso es realmente genial !
Podemos revertir fácilmente el diseño anterior con un par de ajustes simples.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <style> .grid-container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-rows: 150px 300px 100px; grid-template-columns: 200px 1fr; } </style> </head> <body> <div class="grid-container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
También puede colocar elementos utilizando nombres de área de cuadrícula. En este ejemplo, el primer div tiene el color. Sin embargo, en realidad se coloca en el área del pie de página debido a la configuración de grid-row-start, grid-row-end, grid-column-start y grid-column-end en el pie de página nombrado.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <html> <head> <style> .grid-container { display: grid; grid-template-areas: "header header" "sidebar content" "footer footer"; grid-template-rows: 150px 300px 100px; grid-template-columns: 200px 1fr; } .a { grid-row-start: footer; grid-row-end: footer; grid-column-start: footer; grid-column-end: footer; } </style> </head> <body> <div class="grid-container"> <div class="a"></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
Cuadrícula implícita
¿Qué sucede cuando solo tiene, digamos, 3 celdas de cuadrícula definidas en el CSS, pero tiene 9 elementos de cuadrícula en el marcado html? En este escenario, comienza a encontrarse con el concepto de la cuadrícula implícita . Cualquier elemento adicional más allá del espacio especificado se coloca automáticamente en la cuadrícula implícita. Una cuadrícula implícita se puede definir utilizando las propiedades grid-auto-rows, grid-auto-columnas y grid-auto-flow.
Este primer ejemplo muestra solo 3 celdas definidas explícitamente. Sin embargo, tenemos 9 elementos de la cuadrícula para tratar. En este caso, usamos grid-auto-rows: 150px;para agregar nuevas filas de 150 píxeles de alto para cualquier elemento insertado automáticamente.
