Post Top Ad

Your Ad Spot

miércoles, 14 de octubre de 2020

Tutorial de cuadrícula CSS

 

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 webPuede 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ículaHacemos esto estableciendo la displaypropiedad en gridCualquier hijo directo de un contenedor de cuadrícula definido ahora es automáticamente elementos de cuadrícula.


pantalla: cuadrícula;

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.
cuadrícula de visualización


pantalla: cuadrícula en línea;

En el caso de que displayse establezca en inline-grid, observe que los elementos de la cuadrícula solo abarcan el ancho del contenido.
mostrar cuadrícula en línea


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-rowsgrid-template-columns.


rejilla-plantilla-filas

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.
rejilla-plantilla-filas


columnas-plantilla-cuadrícula

Ahora tenemos 2 filas y 3 columnas, todas con una altura y un ancho exactos de 100 píxeles.
columnas-plantilla-cuadrícula


fr en filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula

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.
fr en filas de plantilla de cuadrícula y columnas de plantilla de cuadrícula


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 ()

ejemplo de grid-template-rows minmax

cuadrícula-plantilla-columnas minmax

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 ()

ejemplo de función de repetición


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-gapTenga en cuenta que no puede aplicar ningún estilo a las canaletas. Estos son solo para espacios en blanco.


brecha de red

brecha de cuadrícula css

cuadrícula-fila-brecha cuadrícula-columna-brecha


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)


grid-row-start grid-row-end grid-column-start grid-column-end


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.

grid-column-start grid-column-end

grid-row-start grid-row-end

rejilla-fila rejilla-columna


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.

colocar el elemento de la cuadrícula usando líneas con nombre


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 nombreEste 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.

ejemplo de áreas de plantilla de cuadrícula
¡Ok, eso es realmente genial !

Podemos revertir fácilmente el diseño anterior con un par de ajustes simples.

demostración de áreas de plantilla de cuadrícula

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.

Colocación de elementos por área de cuadrícula


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.