CSS cuadrícula de contenedores

CSS | Rejilla Contenedores : Aquí, vamos a aprender sobre el contenedor red en CSS con algunos de los ejemplos .

CSS | Rejilla Contenedores

Existen numerosas formas de mostrar nuestros artículos o elementos de la lista. class ejemplo, se puede mostrar en la barra de navegación, en una barra de menús y otras cosas. Bueno, sería correcto decir que hay muchos más de estos métodos para implicar a nuestra página web. Además, es el único elección de qué tipo de peinado o el formato que desea utilizar For sus elementos de la lista de los desarrolladores. Pero vamos a discutir uno de esos métodos que se utiliza muy a menudo y también ayuda en la toma de su página web mucho más versátil y sensible, CSS cuadrícula de contenedores .

cuadrícula contenedor no es un método difícil de utilizar para visualizar los elementos de su página web. Así, ¿cuál es el contenedor de cuadrícula es el primer lugar? Así, los contenedores de rejilla comprenden de elementos de la cuadrícula y esos mismos elementos se colocan o insertados dentro de columnas y filas. Todos nos hemos encontrado con diferentes tipos de red en nuestra vida diaria, así que imagina un tal cuadrícula vacía e iniciar la colocación de elementos en el interior filas y columnas de esa rejilla y allí están, que es un contenedor de cuadrícula y la misma cosa es posible en CSS también.

Implementación:

Con la definición de un contenedor de cuadrícula en mente, ahora vamos a entender cómo se crea un elemento comportan como un contenedor de cuadrícula. De nuevo, esto no es una tarea difícil, todo lo que tienes que hacer es modificar la propiedad de presentación un poco. Para hacer una comporte como un elemento contenedor de cuadrícula, que tendrá que establecer su propiedad de presentación a la red o en línea de la red . De esta manera el elemento HTML comenzará a comportarse como un contenedor de cuadrícula.

Sintaxis:

Element {
display: grid/inline-grid;
}

Propiedades:

Ahora echemos un vistazo a algunas de las propiedades del contenedor de cuadrícula:

1) La propiedad de la rejilla-template-columnas

El uso fundamental de rejilla-plantilla-columnas-propiedad es especificar el número total de columnas de la disposición de la rejilla y también puede ser usado para especificar la anchura de esas columnas.

Los valores de esta propiedad son listas separados por espacios donde cada valor sería definir la longitud de cada columna.

for ejemplo, si desea añadir 4 columnas en su diseño de la red, basta con especificar el ancho de las columnas 4 o simplemente escribir en automático class cada columna a tener el mismo ancho.

Sintaxis:

Element {
display: grid;
grid-template-columns: auto auto auto auto;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 15px;
background-color: red;
padding: 10px;
}
.grid> div {
background-color: pink;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
</br>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>

salida

CSS Grid Container - 4

Nota: Una cosa a tener en cuenta aquí es que si usted tiene más de 4 elementos en una cuadrícula de 4 columna, a continuación, la red va a crear una nueva fila en sí como para caber en los artículos.

2) La propiedad de la rejilla-template-filas

Esta propiedad es el opuesto de propiedad de la columna, en este, se puede definir la altura de cada fila de la cuadrícula.

Sintaxis:

Element {
grid-template-rows: 50px 100px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 150px;
grid-gap: 10px;
background-color: red;
padding: 10px;
}
.grid > div {
background-color: pink;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

salida

CSS Grid Container - 5

En el ejemplo anterior las dos filas son establecidos por la propiedad rejilla-template-filas a 80px y 150 px .

3) La propiedad justificar-contenido

para caber en toda la red dentro del contenedor justificar-contenido propiedad se utiliza.

Sintaxis:

Element {
justify-content: space-evenly;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
justify-content: space-evenly;
grid-template-columns: 40px 60px 70px;
grid-gap: 10px;
background-color: pink;
padding: 10px;
}
.grid> div {
background-color: red;
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>

salida

CSS Grid Container - 6

Nota: class esta propiedad a realidad el trabajo, asegúrese de que todo el ancho de la red debe ser menor que la de la anchura del contenedor.

4) La propiedad align-contenido

Para alinear toda la cuadrícula verticalmente dentro del contenedor se utiliza esta propiedad.

Sintaxis:

Element {
align-content: center;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.grid {
display: grid;
height: 400px;
align-content: center;
grid-gap: 15px;
grid-template-columns: auto auto auto;
background-color: pink;
padding: 10px;
}
.grid > div {
background-color: red;
text-align: center;
padding: 20px 0;
font-size: 40px;
}
</style>
</head>
<body>
<h1>CSS Grid container</h1>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>

salida

CSS Grid Container - 7

Nota: For esta propiedad a realidad el trabajo, asegúrese de que toda la altura de la rejilla debe ser inferior a la de la altura del recipiente.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *