Propiedades del contenedor de cuadrícula en CSS | Explicado
Este artículo proporcionará una guía completa para el contenedor de la red y, en este sentido, cubrirá los siguientes conceptos fundamentales del contenedor de la red:
- ¿Qué es un contenedor de cuadrícula en CSS?
- La propiedad de visualización
- Propiedades del contenedor de cuadrícula en CSS
- Cómo usar propiedades de contenedores de cuadrícula en CSS
Vamos a empezar!
¿Qué es un contenedor de cuadrícula??
Un contenedor de cuadrícula es una caja/contenedor que contiene elementos de cuadrícula y puede colocar estos elementos dentro de las filas y columnas.
La propiedad de visualización
Para crear un contenedor de cuadrícula, necesitamos utilizar la propiedad de visualización y establecer su valor como red en línea o cuadrícula. El siguiente fragmento muestra la sintaxis básica de la propiedad de visualización:
Pantalla: valor;Ejemplo 1
En el fragmento de código dado a continuación, crearemos un contenedor de cuadrícula y dentro del contenedor declararemos cinco elementos infantiles:
Primer elemento
Segundo artículo
Tercer artículo
Cuarto artículo
Quinto artículo
Sexto artículo
Las clases de estilo respectivas para contenedores de cuadrícula y elementos de cuadrícula serán así:
El fragmento de código anterior mostrará la siguiente salida:
La salida verifica que los elementos de contenedor de cuadrícula y de la cuadrícula se estilan de acuerdo con sus respectivas clases de estilo.
Propiedades del contenedor de cuadrícula en CSS
La tabla que se indica a continuación proporcionará una breve guía para las propiedades del contenedor de cuadrícula:
| Propiedades | Descripción |
|---|---|
| Columna de plantilla de cuadrícula y filas de plantilla de cuadrícula | Determine el tamaño de columnas y filas dentro de un contenedor de cuadrícula y estas propiedades pueden tomar una lista de valores separados por el espacio e.gramo. táctica, nombre de línea. |
| arena de plantilla | Determina cómo mostrar filas y columnas mediante el uso de elementos de cuadrícula con nombre. |
| plantilla | Es una propiedad abreviada utilizada para lograr las funcionalidades de tres propiedades, i.mi., columnas de plantilla de cuadrícula, filas de plantilla de cuadrícula y áreas de cuadrícula. |
| hilado de filas y columna-brecha | Estas propiedades determinan la brecha entre las filas de la cuadrícula y las columnas de la cuadrícula respectivamente. |
| Grid-column-gap y gap de red de cuadrícula | Estas propiedades se utilizan para especificar el tamaño del espacio entre las columnas de la cuadrícula y las filas de la cuadrícula, respectivamente. |
| brecha | Es una propiedad abreviada utilizada para lograr las funcionalidades de dos propiedades i.mi. Grid-column-gap y gap de red de cuadrícula |
| Justify-ítems | Alinea los elementos de la cuadrícula a lo largo de las filas/eje en línea. |
| ítems alineados | Alinea los elementos de la cuadrícula a lo largo de las columnas/eje en línea. |
| ítems de lugar | Es una propiedad en taquigrafía para las propiedades alineadas y de Justify-Items, que establece tanto en una sola declaración. |
| Justify-Content | Alinea la cuadrícula a lo largo de las filas/eje en línea |
| alineado | Alinea la cuadrícula a lo largo de las columnas/eje de bloque |
| lugar de cola | Es una propiedad en taquigrafía para alinearse y justificar contenido. |
| Grid-autos-columna | Determina el tamaño predeterminado para las columnas. |
| rejilla | Define el tamaño predeterminado para las filas. |
| cuadrícula | Determina cómo se agregan artículos automáticos en la cuadrícula CSS. |
| red | Es una propiedad en taquigrafía para propiedades de cuadrícula múltiple (i.mi. Regalas de plantilla de cuadrícula, columnas de plantilla de cuadrícula, árbitro de plantilla de cuadrícula, grid-autos-filas, grid-autos-columnas y el flujo de grid-autos). |
Cómo usar propiedades de contenedores de cuadrícula en CSS
Ahora, prácticamente implementaremos algunas de las propiedades descritas anteriormente para una comprensión profunda.
Las propiedades de columnas de plantilla de la cuadrícula y de la rejilla de la cuadrícula
Estas propiedades pueden tomar múltiples valores separados en el espacio como Auto, Porcentaje, etc.
Modificemos un poco el ejemplo1; En el siguiente ejemplo, todo el código seguirá siendo el mismo, excepto la propiedad de columnas de plantilla de cuadrícula.
Ejemplo 2
En este ejemplo, agregaremos una propiedad de columnas de plantilla de cuadrícula para especificar el tamaño de las columnas de nuestra elección:
Columna de plantilla de cuadrícula: 1fr automática automática;Del fragmento anterior, podemos observar que el ancho de la primera columna es "1fr" y el ancho de las dos columnas restantes es "auto".
Por lo tanto, el ancho de la primera columna será diferente de las dos columnas restantes:
Del mismo modo, podemos usar el filas de la cuadrícula propiedad para especificar el tamaño de las filas.
La propiedad alineada y contenido
Para alinear la cuadrícula a lo largo del eje vertical/de bloque o columnas, podemos usar la propiedad de alineación de contenido, y puede tomar diferentes valores para realizar diferentes funcionalidades, como "Centro", "Inicio", "End", "Space-incluso cuando", etc.
Ejemplo 3
En este ejemplo, utilizaremos la propiedad Aline-Content y estableceremos su valor como "Fin" para establecer/alinear las filas al final del contenedor. El fragmento de código a continuación muestra el código para la clase de contenedor, mientras que la clase de elemento y el código HTML seguirán siendo el mismo que en ejemplos anteriores:
.Clase de contenedoresPantalla: cuadrícula;
Columna de plantilla de cuadrícula: Auto Auto Auto;
Altura: 300px;
alineado contenido: final;
Color de fondo: verde;
relleno: 10px;
La propiedad de alineación de contenido tendrá el siguiente impacto cuando su valor se establezca como "fin":
La salida autentica el funcionamiento de la propiedad alineada en contenido.
Del mismo modo, podemos implementar el resto de las propiedades del contenedor de cuadrícula para aprovechar las diferentes funcionalidades dependiendo de nuestro deseo y necesidades.
Conclusión
Un contenedor de cuadrícula es una caja/contenedor que contiene elementos de cuadrícula y puede colocar estos elementos dentro de las filas y columnas. Para crear un contenedor de cuadrícula, necesitamos utilizar la propiedad de visualización y establecer su valor como red en línea o cuadrícula. Además, una amplia gama de propiedades de la cuadrícula está disponible en CSS para diseñar las páginas web, como Justify-items alineados, elementos, contenido de justificación, alineado, contenido, grid-autos fluido, cuadrícula, etc. Este artículo explicó varios aspectos de las propiedades de los contenedores de cuadrícula y los implementó prácticamente.