Curso FullStack

Python
Codo a Codo 4.0
CSS
Parte 6
CSS Grid | Introducción
● CSS Grid es una muy buena opción para estructurar, organizar y diseñar los
elementos de nuestro sitio web, ofreciéndonos un sistema de disposición
apropiado de forma nativa en el navegador y a nuestra total disposición.
● En CSS solemos utilizar múltiples propiedades para estructurar nuestros sitio web,
utilizando inline-block, floats, relative o hasta el mismo flexbox que solo utiliza una
dimensión.
● El módulo CSS Grid entra en acción ofreciéndonos un sistema de filas y columnas
en dos dimensiones, y total libertad de los ítems para organizar nuestros
contenido a gusto.
● ¿Y donde queda el Responsive Design? Tampoco es un problema con CSS Grid ya
que podemos definir filas y columnas como también redefinirlas a nuestro gusto
dentro de un media query.
CSS Grid
El módulo de diseño de CSS Grid ofrece un sistema de diseño basado en cuadrículas,
con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar
flotadores y posicionamiento.

Para ampliar:
https://www.w3schools.com/css/css_grid.asp
CSS Grid | Conceptos básicos
● Grid Container: es nuestro elemento “Padre”, donde se asigna un {display:grid;} y
nos permitirá colocar otras propiedades para manipular nuestro diseño.
● Grid Item: son los hijos directos de nuestro container. Estos los manejaremos a
nuestra voluntad, nuestras filas y columnas que moveremos a nuestro gusto.
● Grid Line: son las líneas divisorias horizontales y verticales.
● Grid Track: es el espacio entre dos líneas adyacentes. Filas y columnas.
● Grid Cell: nuestras celdas serán el espacio entre dos filas adyacentes y 2 columnas
adyacentes.
● Grid Area: espacio rodeado por 4 grid lines.
CSS Grid | Contenedor
<div> Elemento padre que
<div class="grid-item">1</div> contiene uno o más
<div class="grid-item">2</div> elementos.
<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>
CSS Grid | Display
Un elemento HTML se transforma en un contenedor de grilla cuando tiene su propiedad
display seteada en grid o inline-grid

.grid-container{ .grid-container{ Ejemplos:

display: grid; display: inline-grid; display: grid
} } display: inline-grid

CSS Grid | Grid Items

Se pueden referenciar por fila o por columna, aunque no es la única forma.
CSS Grid | Grid Gaps
Es el espacio entre los ítems. Ejemplos:
Se pueden ajustar los tamaños de gap con las grid-column-gap
siguientes propiedades: grid-column-gap; grid-row-gap
grid-row-gap; grid-gap grid-gap

CSS Grid | Grid Lines

Hay que referirse a los números de línea para colocar
un grid-ítem en un contenedor:

Poner un grid item en la línea de Poner un grid item en la línea de

columna 1 y dejarlo finalizar en la fila 1 y dejarlo finalizar en la línea
línea de columna 3: de fila 3:

.item{ .item{
grid-column-start: 1; grid-row-start: 1;
grid-column-end: 3; grid-row-end: 3;
} }
Ejemplo Ejemplo
CSS Grid | Propiedades
Propiedad Descripción

column-gap Especifica el espacio entre las columnas.

gap Una propiedad abreviada para las propiedades de espacio entre filas y
espacio entre columnas.

grid Una propiedad abreviada para las filas de plantilla de cuadrícula, columnas
de plantilla de cuadrícula, áreas de plantilla de cuadrícula, filas
automáticas de cuadrícula, columnas automáticas de cuadrícula y las
propiedades de flujo automático de cuadrícula.

grid-area Especifica un nombre para el elemento de la cuadrícula o esta propiedad

es una propiedad abreviada para las propiedades grid-row-start, grid-
column-start, grid-row-end y grid-column-end.

grid-auto-columns Especifica un tamaño de columna predeterminado.

grid-auto-flow Especifica cómo se insertan los elementos colocados automáticamente en

la cuadrícula.

grid-auto-rows Especifica un tamaño de fila predeterminado.

CSS Grid | Propiedades (continuación)
Propiedad Descripción

grid-column Una propiedad abreviada para las propiedades grid-column-start y grid-

column-end.

grid-column-end Especifica dónde terminar el elemento de la cuadrícula.

grid-column-gap Especifica el tamaño del espacio entre columnas.

grid-column-start Especifica dónde comenzar el elemento de la cuadrícula.

grid-gap Una propiedad abreviada para las propiedades grid-row-gap y grid-

column-gap.

grid-row Una propiedad abreviada para las propiedades grid-row-start y grid-row-

end.

grid-row-end Especifica dónde terminar el elemento de la cuadrícula.

grid-row-gap Especifica el tamaño del espacio entre filas.

CSS Grid | Propiedades (continuación)
Propiedad Descripción

grid-row-start Especifica dónde comenzar el elemento de la cuadrícula.

grid-template Una propiedad abreviada para las propiedades de las filas de plantilla de
cuadrícula, columnas de plantilla de cuadrícula y áreas de cuadrícula.

grid-template-areas Especifica cómo mostrar columnas y filas, utilizando elementos de

cuadrícula con nombre.

grid-template-columns Especifica el tamaño de las columnas y cuántas columnas en un diseño de

cuadrícula.

grid-template-rows Especifica el tamaño de las filas en un diseño de cuadrícula.

row-gap Especifica el espacio entre las filas de la cuadrícula.

Fuente: https://www.w3schools.com/css/css_grid.asp
CSS Grid | Grid Container
Para que un elemento HTML se comporte como un contenedor de cuadrícula, debemos
establecer la propiedad display en grid (cuadrícula) o inline-grid (cuadrícula en línea).
Los contenedores de cuadrícula consisten en elementos de cuadrícula, colocados
dentro de columnas y filas.

<div class="grid-container"> .grid-container { .grid-container > div {

<div>1</div> width: 800px; background-color: lightblue;
<div>2</div> display: grid; text-align: center;
<div>3</div> grid-template-columns: repeat(4, auto); font-size: 20px;
<div>4</div> grid-gap: 10px; height: 40px;
<div>5</div> background-color: blue; }
<div>6</div> padding: 10px;
<div>7</div> }
<div>8</div>
</div>
CSS Grid | grid-template-columns
La propiedad grid-template-columns define el número de columnas en su diseño de
cuadrícula y puede definir el ancho de cada columna.
El valor es una lista separada por espacios, donde cada valor define el ancho de la
columna respectiva.
Si desea que su diseño de cuadrícula contenga 4 columnas, especifique el ancho de las
4 columnas, o "auto" si todas las columnas deben tener el mismo ancho.
Se pueden establecer anchos en px, unidades relativas o %, aunque es recomendable
utilizar la medida fr.

Medida en px:

grid-template-columns: 300px 200px 400px;

CSS Grid | grid-template-columns
Medida en em: grid-template-columns: 40em 20em 30em; /*1em=16px*/

Medida en %: grid-template-columns: 50% 35% 15%;

Medida automática: grid-template-columns: auto auto auto;

Si tiene más de 4 elementos en una cuadrícula de 4 columnas, la cuadrícula agregará

automáticamente una nueva fila para colocar los elementos.
CSS Grid | grid-template-columns
Unidad fracción restante (fr)
La unidad especial de Grid CSS fr (fraction) simboliza una fracción de espacio restante en el grid.

grid-template-columns: 0.5fr 2fr 1fr;

La expresión repeat():
Se puede utilizar la expresión repeat() para indicar repetición de valores, indicando el número de veces
que se repiten y el tamaño en cuestión.
La expresión a utilizar sería la siguiente: repeat([núm de veces], [valor o valores]):

grid-template-columns: repeat(3, 1fr);

CSS Grid | 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 el alto de la fila respectiva.

grid-template-rows: 80px 200px;

CSS Grid | Propiedad justify-content
La propiedad justify-content se utiliza para alinear toda la cuadrícula dentro del
contenedor.
Nota: El ancho total de la cuadrícula debe ser menor que el ancho del contenedor para
que la propiedad justify-content tenga algún efecto.

space-evenly center

space-around start

space-between end
CSS Grid | Propiedad align-content
La propiedad align-content se usa para alinear verticalmente toda la cuadrícula dentro
del contenedor.
Nota: La altura total de la cuadrícula debe ser menor que la altura del contenedor para
que la propiedad align-content tenga algún efecto.

center space-evenly
CSS Grid | Propiedad align-content

space-around space-between

start end
CSS Grid | Propiedad grid-area
La propiedad grid-area especifica el tamaño y la ubicación de un elemento de
cuadrícula en un diseño de cuadrícula, y es una propiedad abreviada para las siguientes
propiedades: grid-row-start, grid-column-start, grid-row-end, grid-column-end.
La propiedad del área de la cuadrícula también se puede utilizar para asignar un
nombre a un elemento de la cuadrícula. A continuación, se puede hacer referencia a los
elementos de cuadrícula con nombre mediante la propiedad grid-template-areas del
contenedor de cuadrícula.

Para ampliar: https://www.w3schools.com/cssref/pr_grid-area.asp

Ver ejemplos:
• grid-area1.html
• grid-area2.html
<> • grid-area3.html
• grid-template-area.html
CSS Grid | Ejemplo
● En el siguiente link podrán ver cómo crear un pequeño proyecto con CSS Grid.
● La idea es que traten de realizar el contenido de la imagen para entender un poco
mejor cómo funciona CSS Grid.
○ Ejemplo: https://medium.com/sue%C3%B1os-graficos/css-grid-la-mejor-
opci%C3%B3n-para-crear-dise%C3%B1os-web-b1b7b8735566
CSS Grid | Más información:
Documentación:

• https://lenguajecss.com/css/maquetacion-y-colocacion/grid-css/
• https://www.w3schools.com/css/css_grid.asp
• https://www.w3schools.com/css/css_grid_container.asp
• https://www.w3schools.com/css/css_grid_item.asp
• https://www.w3schools.com/cssref/pr_grid-area.asp
• https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Conceptos_B%C3%A1sicos_del_Posici
onamiento_con_Rejillas

Material multimedia:

• CSS Grid desde cero: https://youtu.be/n1Lnar9mTF8

• CSS GRID Página Web Responsive: https://youtu.be/9w3gy2dYN_E?t=1
Herramientas
Firefox Browser Developer Edition:

https://www.mozilla.org/es-ES/firefox/developer/