Gap de cuadrícula CSS
En este tutorial, utilizaremos esta propiedad de "brecha de cuadrícula" en CSS y le explicaremos el concepto de "brecha de cuadrícula" en detalle junto con diferentes ejemplos.
Ejemplo 1:
Comenzaremos con nuestro primer ejemplo creando un nuevo archivo en el software, Visual Studio Code. Cuando creamos un nuevo archivo en el código Visual Studio, podemos elegir el idioma y seleccionamos HTML. El código HTML debe ser creado. Visual Studio Code nos permite adquirir instantáneamente las etiquetas fundamentales ingresando "!"Y luego hacer clic en" Ingrese."Entonces, nos beneficiaremos de esta capacidad y recopilaremos todas estas etiquetas fundamentales. En la etiqueta de cabeza HTML, proporcionamos un enlace al archivo CSS. Vamos a crear un encabezado y luego poner un párrafo debajo de este encabezado. Luego, creamos una clase Div principal con el nombre "Grid-Container" y ponemos otras siete clases de DIV dentro de este Div principal. Estamos dando diferentes nombres a todos los divs, como "item1" para Div Clase 1, "item2" para Div Clase 2, y así sucesivamente.
Estamos utilizando la propiedad de "alineación de texto" para el "cuerpo" y la alineamos con el "centro". Luego, elegimos "verde" como el "color" del encabezado y también colocamos el "subrayado" para la propiedad "Decoración de texto". La familia de la fuente es "argelina". La "familia de fuentes" del párrafo es "Times New Roman". El "Font-Weight" es "audaz" y "granate" el "color". El "tamaño de fuente" que estamos configurando aquí es "20px" para el párrafo y también "cursiva" la fuente del párrafo.
Ahora, vamos a establecer el Div principal llamado "Container de cuadrícula". Para esto, la "pantalla" que usamos es la "cuadrícula". Luego, tenemos la propiedad de "columna de plantilla de cuadrícula" que se utiliza para especificar el número de columnas dentro de una cuadrícula. Ponemos "Auto Auto Auto" como el valor de esta propiedad, lo que significa que el tamaño de la columna se establece de acuerdo con el tamaño del contenedor. Aquí tenemos tres columnas en este diseño de cuadrícula.
Ahora, estamos estableciendo la "brecha de columna de la cuadrícula" y la "brecha de la red de la cuadrícula" por separado. El "-Gap-Column-Gap" que estamos configurando es "40px" y el "-gap de la red de la cuadrícula" es "20px". El "color de fondo" del contenedor Div principal es "naranja" y el relleno que usamos aquí es "10px". Esta propiedad de relleno se utiliza para generar el espacio alrededor del contenido.
Ahora, vamos a establecer el "div" de la "cuadrícula. contenedor "que representa todos los divs que están presentes dentro del Div principal. Estamos estableciendo el "color de fondo" de los divs en "blanco" y el texto que se escribe dentro de estos está alineado en el "centro". Después de todo esto, tenemos la propiedad de "relleno" en la que colocamos el relleno superior e inferior en "20px" y el acolchado izquierdo y derecho es "0". El tamaño de la fuente que se escribe dentro de estos divs se establece en "30px". Ahora, mire la captura de pantalla de salida debajo de este código.
Aquí, el espacio o el espacio entre las filas es "20px" y el espacio entre las columnas es "40px" en la captura de pantalla dada.
Ejemplo # 2:
En este ejemplo, tenemos ocho divs dentro del principal diver "contenedor de la cuadrícula". Aplicaremos la propiedad "GAP de cuadrícula" a este código, que es la propiedad de taquigrafía en "Grid-Column-Gap" y "Grid-Row-Gap". Estableceremos tanto la brecha de columna como la brecha de fila dentro de esta propiedad de "brecha de cuadrícula".
Usamos el "color" del encabezado como "naranja" y "decoración de texto" se establece aquí para "subrayar". Además, la "familia de fuentes" es "argelina". Luego, establecemos la "cuadrícula" para la propiedad "visualización" y en la "columna de plantilla de la cuadrícula", estamos utilizando cuatro "auto", por lo que obtendremos cuatro columnas en la salida.
Después de esto, tenemos la propiedad "Grid-gap" en la que establecemos el tamaño del espacio en "%" para las columnas y filas de la cuadrícula. Lo establecemos en "5%", por lo que creará un espacio de "5%" entre las columnas y "5%" entre las filas. Utilizamos el "color de fondo" para el "gris de liquidad de luz" y el "relleno" es "10px" para esta "cuadrícula. Ontainer ". Aplicamos el "color de fondo" a los otros divs en "RGBA (122, 240, 122, 0.8), que es "verde claro" y también, tenemos un "0.Valor alfa de 8 ", por lo que muestra cierta transparencia.
Alineamos el texto en "Center" y el "relleno" para la "Top" y "Bottom" es "20px" y "0" es para el relleno "Izquierda" y "Derecha". El "tamaño de fuente" es "30px" en este código.
En la captura de pantalla dada, hay cuatro columnas y el espacio entre las filas y las columnas es "5%", como lo hemos establecido en la propiedad de "Gap-Gap".
Ejemplo # 3:
Aquí, tenemos doce divs en este ejemplo y aplicaremos la propiedad "Gap-Gap" en estos. Además, estableceremos el valor de esta propiedad "Gap de cuadrícula" en "PX" en el código CSS.
Para el "cuerpo", usamos el atributo "Align de texto" y lo arreglamos en "Center". El "estilo de fuentes" es "cursiva". Luego, agregamos el valor de "cuadrícula" para la propiedad de "pantalla". Utilizamos cuatro "auto" en la propiedad "Grid-Template-Column" para obtener cuatro columnas en la salida. Después de eso, tenemos la propiedad "Grid-gap", que nos permite especificar el tamaño del espacio en "Pixel" para las columnas y filas de la cuadrícula. Lo establecemos en "50px", lo que significa que habrá "50px" de espacio entre las columnas y "50px" entre las filas. El "color de fondo" está configurado como "rosa". Además, creamos un "borde" para este Div principal que se establece en "1px Solid Black".
Aquí tenemos "10px" del "relleno". Ahora, estamos configurando el "color de fondo" de los Divs internos en formato "RGBA" y lo establecemos en "RGBA (204, 90, 90, 0.8) ”que muestra transparencia para este color. El valor de transparencia aquí es "0.8 ". El "relleno", el "tamaño de fuente" y la "fuente de fuente" son los mismos que hemos usado en los ejemplos anteriores.
Esto muestra que tenemos cuatro columnas en la salida y también el espacio entre las filas de la cuadrícula y las columnas de la cuadrícula es "50px" aquí.
Conclusión
El objetivo de este tutorial es ayudarlo a comprender cómo utilizar la propiedad CSS "Gap-Gap". En este tutorial, hemos analizado la propiedad de CSS "Grid-gap" y describimos lo que significa la propiedad de "brecha de agarre", por qué usamos esta propiedad, cómo usar esto y cómo devuelve la salida. El uso de la "brecha de la cuadrícula" ya se ha discutido aquí. Hemos explicado esta propiedad que utilizamos para establecer el tamaño del espacio entre las filas y las columnas de la cuadrícula. También hemos mostrado ejemplos de cómo usar la propiedad de "brecha de cuadrícula", así como los resultados de todos los ejemplos en este tutorial.