GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Diseño Web Responsivo - Cuadrículas

Diseño de cuadrícula
El Diseño de la cuadrícula en CSS ofrece un sistema basado en el diseño de grid, con filas y
columnas, por lo que es más fácil diseñar páginas web sin tener que utilizar flotadores y
posicionamiento.

Elementos de cuadrícula
Un diseño de grid consiste en un elemento padre, con uno o más elementos secundarios.

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

Ver: Código 461.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Propiedades de pantalla
Un elemento HTML se convierte en un contenedor de cuadrícula mediante el establecimiento de
la propiedad display en grid o inline-grig.

.grid-container {
display: grid;
}

Ver: Código 462.html

.grid-container {
display: inline-grid;
}

Ver: Código 463.html

Columnas de la cuadrícula
La línea vertical de los elementos de cuadrícula se llama columna.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Las filas de la cuadrícula

La línea horizontal de los elementos de cuadrícula se llama fila.

Las lagunas de la cuadrícula

El espacio entre cada columna / fila se denominan laguna.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Se puede ajustar el tamaño de la separación entre las filas y columnas mediante el uso de una de
las siguientes propiedades:

grid-column-gap
grid-row-gap
grid-gap

La propiedad grid-column-gap establece la distancia entre las columnas:

.grid-container {
display: grid;
grid-column-gap: 50px;
}
Ver: Código 464.html

La propiedad grid-row-gap establece la distancia entre las filas:

.grid-container {
display: grid;
grid-row-gap: 50px;
}
Ver: Código 465.html

La propiedad grid-gap es una propiedad abreviada que establece los espacios para columnas y
filas :
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Ver: Código 466.html

La propiedad grid-gap también puede usarse para definir un único valor que se aplique tanto a
filas como a columnas:
.grid-container {
display: grid;
grid-gap: 50px;
}
Ver: Código 467.html
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Líneas de cuadrícula
La línea entre columnas se denominan líneas de columna y la línea entre filas se denominan líneas
de fil .

Colocar un elemento en la grilla que comience en la línea de la columna 1 y que terminar en la

línea de la columna 3:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

Ver: Código 468.html

Colocar un elemento en la grilla que comience en la línea de la fila 1 y que termine en la línea de la
fila 3:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

Ver: Código 469.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Cuadrícula de Contenedores
Para hacer que un elemento HTML se comportan como un contenedor de cuadrícula, tiene que
establecer la propiedad display en grid o inline-grid.
Los contenedores de grid consisten en elementos de la cuadrícula, colocados dentro de las
columnas y filas.

La propiedad grid-template-columns
La propiedad grid-template-columns define el número de columnas en su diseño de
cuadrícula y se puede definir la anchura de cada columna.
El valor es una lista separada por espacios, donde cada valor define la longitud de la columna
respectiva.
Si desea un diseño de cuadrícula que contiene 4 columnas, especifique el ancho de las 4 columnas
o "auto" si todas las columnas deben tener la misma anchura.

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}

Ver: Código 470.html

La propiedad grid-template-columns también puede ser utilizada para especificar el tamaño

(anchura) de las columnas.

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

Ver: Código 471.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La propiedad grid-template-rows
La propiedad grid-template-rows define la altura de cada fila.

El valor es una lista separada por espacios, donde cada valor define la altura de la fila respectiva:

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

Ver: Código 472.html

La propiedad justify-content
La propiedad justify-content se utiliza para alinear toda la cuadrícula dentro del recipiente.

Con el valor space-evenly:

.grid-container {
display: grid;
justify-content: space-evenly;
}

Ver: Código 473.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Con el valor space-around:

.grid-container {
display: grid;
justify-content: space-around;
}

Ver: Código 474.html

Con el valor space-between:

.grid-container {
display: grid;
justify-content: space-between;
}

Ver: Código 475.html

Con el valor center:

.grid-container {
display: grid;
justify-content: center;
}

Ver: Código 476.html

Con el valor start:

.grid-container {
display: grid;
justify-content: start;
}

Ver: Código 477.html

Con el valor end:

.grid-container {
display: grid;
justify-content: end;
}

Ver: Código 478.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La propiedad align-content
La propiedad align-content se utiliza para alinear verticalmente toda la cuadrícula dentro del
recipiente.

Con el valor center:

.grid-container {
display: grid;
height: 400px;
align-content: center;
}

Ver: Código 479.html

Con el valor space-around:

.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}

Ver: Código 480.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Con el valor space-between:

.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}

Ver: Código 481.html

Con el valor start:

.grid-container {
display: grid;
height: 400px;
align-content: start;
}

Ver: Código 482.html

Con el valor end:

.grid-container {
display: grid;
height: 400px;
align-content: end;
}

Ver: Código 483.html

Elemento de cuadrícula

Ver: Código 484.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Elementos secundarios (artículos)

Un contenedor de cuadrícula o grid contiene artículos grid. Por defecto, un contenedor tiene un
elemento de la cuadrícula para cada columna, en cada fila, pero puede configurar el estilo de los
elementos de la cuadrícula para que puedan abarcar varias columnas y / o filas.

La propiedad grid-column:
La propiedad grid-column define en que columna (s) se debe colocar un elemento. Define en
donde empezará el elemento y donde va a terminar.

Para colocar un elemento, se puede hacer referencia a los números de línea o utilizar la palabra
clave "span" para definir el número de columnas del elemento.

Hacer que el "item 1" Inicie en la columna 1 y termine en la columna 5:

.item1 {
grid-column: 1 / 5;
}

Ver: Código 485.html

Hacer que el "item 1" Inicie en la columna 1 y tenga una extensión de 3 columnas:

.item1 {
grid-column: 1 / span 3;
}

Ver: Código 486.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Hacer que el "item 2" Inicie en la columna 2 y tenga una extensión de 3 columnas:

.item2 {
grid-column: 2 / span 3;
}

Ver: Código 487.html

La propiedad grid-row:
La propiedad grid-row define en qué fila se debe colocar un elemento. Define en donde el
elemento empezará y donde va a terminar.

Para colocar un elemento, se puede hacer referencia a los números de línea o utilizar la palabra
clave "span" para definir el número de filas que el elemento tendrá:

Hacer que el "item 1" Inicie en la fila 1 y termine en la fila 4:

.item1 {
grid-row: 1 / 4;
}

Ver: Código 488.html

Hacer que el "item 1" Inicie en la fila 1 y tenga una extensión de 2 filas:

.item1 {
grid-row: 1 / span 2;
}

Ver: Código 489.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La Propiedad grid-area:
La propiedad grid-area puede ser utilizada como una propiedad resumida para las
propiedades grid-row-start, grid-column-start, grid-row-end y the grid-column-end.

Hacer que el "ítem 8" Inicie en la fila 1 y columna 2, y termine en la fila 5 y columna 6:

.item1 {
grid-area: 1 / 2 / 5 / 6;
}

Ver: Código 490.html

Hacer que el "ítem 8" Inicie en la fila 2 y columna 1, y se extienda 2 filas y 3 columnas:

.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}

Ver: Código 491.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Nomenclatura en la cuadrícula
La propiedad grid-area también se puede utilizar para asignar nombres a los elementos de la
cuadrícula.

Elementos de la cuadrícula con nombre pueden ser referidos en la propiedad grid-template-

areas del contenedor de cuadrícula.

El elemento 1 obtiene el nombre de “MiArea” y se extiende por las 5 columnas en un diseño de

cuadrícula de 5 columnas:

.item1 {
grid-area: miArea;
}
.grid-container {
grid-template-areas: 'miArea miArea miArea miArea miArea';
}

Ver: Código 492.html

Cada fila está definida por apóstrofes (' '), las columnas de cada fila se define dentro de los
apóstrofes, separadas por un espacio.

Establecer que “MiArea” abarque dos columnas en un diseño de cuadrícula de 5 columnas:

.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}

Ver: Código 493.html

Los puntos seguidos representan un objeto sin nombre.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Hacer que “MiArea” abarque dos columnas y dos filas:

.grid-container {
grid-template-areas: 'miArea miArea . . .' 'miArea miArea . . .';
}

Ver: Código 494.html

Nombrar todos los ítems y hacer una plantilla de página Web:

.item1 { grid-area: encabezado; }

.item2 { grid-area: menu; }
.item3 { grid-area: principal; }
.item4 { grid-area: derecha; }
.item5 { grid-area: pie; }

.grid-container {
grid-template-areas:
' encabezado encabezado encabezado encabezado encabezado encabezado '
'menu principal principal principal derecha derecha '
'menu pie pie pie pie pie ';
}

Ver: Código 495.html

El orden de los elementos

La disposición de la cuadrícula nos permite posicionar los elementos en cualquier lugar que nos
guste. El primer elemento en el código HTML no tiene que aparecer como el primer elemento de
la cuadrícula.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }

Ver: Código 496.html

Se puede volver a organizar el orden de acuerdo a ciertos tamaños de pantalla, mediante el uso de
preguntas de los medios:

@media only screen and (max-width: 500px) {

.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }
}

Ver: Código 497.html