OVERFLOW CSS:

Funciona solo si se ha especificado un

alto con el elemento de tipo height.
visible: hace que el texto sobresalga
de su contenedor y se superpone con
otros elementos.
hidden: hace que el texto solo quepa
en su contenedor y el resto no queda
visible.
scroll: hace que el texto solo quepa
en su contenedor y crea una barra
deslizante lateral para leer lo que no
queda visible.
auto: el comportamiento es el que
establece el navegador por defecto,
normalmente muestra el scroll donde
sea necesario.

DISPLAY CSS:
Establece que elementos se van a
mostrar dentro de la página web.
block: muestra el elemento en una
nueva línea y un tamaño personalizado.
(<div>, <p>, <h1>)
inline: muestra el elemento en la
misma línea, se visualizan de izquierda
a derecha. (<spam>, <b>, <i>)
inline-block: parecido al inline, pero
respeta el width y el height que se les
asigna a los elementos (tamaño
personalizado), respeta las propiedades
de margin y padding.
none: oculta el elemento y otro
elemento ocupa su espacio.

VISIBILITY CSS:
Establece la visibilidad de un elemento.
hidden: El elemento en cuestión se oculta,
pero reserva su espacio que debe ocupar.
 BOX-SIZING EN CSS:
content-box: valor por defecto, cuando se
aplica medidas a la caja con width o height el
grosor del padding, border y margin se
suman al indicado.
border-box: el padding y el border se
incluidos en el width, hace que los elementos
mantengan su tamaño y se usa para que el
box model no se rompa.

• Content Box:
Tenemos un width de 100px y un height de 120px, si se añade un padding de 5px y un
border de 2px, la caja va a medir 114px de ancho por 134px de alto. Ya que se le suma el
padding y border.

.box-1 {
width: 100px;
height: 120px;
padding: 5px;
border: 2px solid blue;
box-sizing: content-box;
}

Esto hace que la caja se vea más grande. Para

llegar a esta medida, el navegador hace el siguiente calculo:
final width: width + (padding-left + padding-right) + (border-right + border-left)
final width: 100px + (2 * 5px) + (2 * 2px) = 114px
final height: height + (padding-top + padding-bottom) + (border-top + border-
bottom)
final height: 120px + (2 * 5px) + (2 * 2px) = 134px
El comportamiento por defecto de los navegadores al calcular el ancho y alto de un elemento
es aplicar la anchura y altura al área de contenido, sin tener en cuenta el border y padding.

• Border Box:
Si se necesita que el elemento mida exactamente lo que se especifica en el width y height
(100px x 120px respectivamente).

.box-2 {
width: 100px;
height: 120px;
padding: 5px;
border: 2px solid blue;
box-sizing: border-box;
}

En lugar de sumar el padding y border se restan del ancho y del alto para que después la
suma total sean las medidas exactas, el navegador hace el siguiente calculo:
final width: width - (padding-left + padding-right) - (border-right + border-left)
final width: 100px - (2 * 5px) - (2 * 2px) = 86px
final width: 86px + 10px padding + 4px border = 100px
final height: height - (padding-top + padding-bottom) - (border-top + border-
bottom)
final height: 120px - (2 * 5px) - (2 * 2px) = 106px
final height: 106px + 10px padding + 4px border = 120px
En el content-box el padding y border del elemento se dibujan por fuera de la anchura y
altura (se suman), mientras que en border-box, el padding y border se dibujan dentro del
ancho y alto (se restan).

POSITION CSS:
Establece la forma en la que será posicionado un elemento.
static: orden natural según donde están colocados en el HTML (por defecto)
relative: los elementos se mueven en base a su posición estática (no depende de otro).
absolute: los elementos se colocan en base al contenedor padre (depende de otro).
fixed: igual que el absoluto, fija un elemento en una posición determinada.
sticky: igual al relativo, usado para pegar menús a la parte superior.

PROPIEDAD VALOR SIGNIFICADO

Empuja el elemento una distancia desde
top auto | size
la parte superior hacia el inferior.
Empuja el elemento una distancia desde
bottom auto | size
la parte inferior hacia la superior.
Empuja el elemento una distancia desde
left auto | size
la parte izquierda hacia la derecha.
Empuja el elemento una distancia desde
right auto | size
la parte derecha hacia la izquierda.

• Posicionamiento estático (static):

El elemento se posiciona de la forma en la que se colocan en el documento HTML original, es
el valor por defecto. No se puede determinar su posicionamiento, ya que no los tiene en
cuenta.
• Posicionamiento relativo (relative):
Los elementos se colocan igual que en el posicionamiento estático (permanecen en la misma
posición) pero dependen del valor de las propiedades top, bottom, left o right se variará la
posición del elemento.
<div> Elemento 1 </div>
<div class="dos"> Elemento 2 </div>
<div> Elemento 3 </div>
<div class="cuatro"> Elemento 4 </div>
<div> Elemento 5 </div>

div{
width: 80px;
height: 40px;
background-color: blue;
}
div.dos {
position: relative;
left: 80px;
}

div.cuatro {
position: relative;
top: 80px;
left: 80px;
}

• Posicionamiento absoluto (absolute):

Utiliza como referencia el primer contenedor padre con posicionamiento relativo.
<div class="padre">
<div> HIJO 1 </div>
<div class="hijo2"> HIJO 2 </div>
<div> HIJO 3 </div>
<div class="hijo4"> HIJO 4 </div>
<div> HIJO 5 </div>
</div>

div.padre {
position: relative;
width: 300px;
height: 200px;
background-color: green;
}

div {
width: 70px;
height: 35px;
background-color: blue;
}

div.hijo2 {
position: absolute;
top: 0px;
left: 150px;
}

div.hijo4 {
position: absolute;
bottom: 70px;
right: 100px;
}
• Posicionamiento fijo (fixed):
Funciona exactamente igual que el posicionamiento absoluto, el elemento tiene una posición
determinada, de esta manera queda fija y no se mueve de dicha posición, aunque se haga
scroll en la pantalla. Se posiciona dependiendo de la pantalla del navegador.
<div> BLOQUE1</div>
<div> BLOQUE2 </div>
<div> BLOQUE3 </div>
<div> BLOQUE4 </div>
<div class="bloque5"> BLOQUE 5 </div>
<div> BLOQUE 6</div>
<div class="bloque7"> BLOQUE 7</div>
<div> BLOQUE 8</div>
<div> BLOQUE 9</div>
<div> BLOQUE 10</div>

div {
width: 90px;
height: 100px;
background-color: green;
}

div.bloque7 {
position: fixed;
top: 30px;
left: 150px;}

div.bloque5 {
position: fixed;
right: 100px;
bottom: 80px;
}

• Posicionamiento pegado (sticky):

Se utiliza cuando se quiere que un elemento se posicione en un lugar especifico de forma fija,
como cuando queremos que un menú de navegación se quede fijo en la parte superior
cuando se hace scroll. Combinación entre relative y fixed.

• Nivel de profundidad (z-index):

Permite que un elemento se coloque encima o debajo de otro. Los elementos con un numero
más alto estarán por encima de otros con un numero más bajo, que permanecerán ocultos
detrás de los primeros.
 FLOAT CSS:
Establece la forma en la que se ubican los elementos dentro de un documento HTML.
none: El elemento no flota (por defecto).
left: El elemento flota a la izquierda.
right: El elemento flota a la derecha.
inheritc: El elemento hereda la dirección de flotación de su padre.

Sin flotar:

Flota una imagen a la izquierda y otra a la derecha:

img.izquierda {
float: left;
}

img.derecha {
float: right;
}

• Clear:
Hace que un elemento no tenga elementos flotantes a su lado, ya que interrumpe el float.
left: hace que no haya elementos flotantes a la izquierda.
right: hace que no haya elementos flotantes a la derecha.
both: hace que no haya elementos flotantes a la derecha ni izquierda.
none: permite que haya elementos flotantes a la derecha e izquierda (por defecto)
<h1>Un título fantástico</h1>
<div class="primero">PRIMERO</div>
<div class="segundo">SEGUNDO</div>

div {
margin:15px;
}

div.primero {
width: 200px;
height:200px;
background-color: red;
float: right;
}

div.segundo {
width: 400px;
height: 150px;
background-color: blue;
clear: right;
}
 FLEXBOX CSS:
Los elementos HTML se adaptan y colocan automáticamente y es más fácil personalizar los
diseños. Están diseñado para crear mediante CSS estructuras de una sola dimensión.

- Contenedor: Elemento padre que tendrá en su interior cada uno de los ítems flexibles.
- Eje principal: Por defecto es la Orientación horizontal (en fila)
- Eje secundario: Orientación vertical.
- Ítem: Cada uno de los hijos flexibles que tendrá el contenedor en su interior.
<div class="container"> <!-- Flex container -->
<div class="item item-1">1</div> <!-- Flex items -->
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>

• Activar el modo Flexbox (display:):

TIPO DE ELEMENTO DESCRIPCIÓN
inline-flex Contenedor en línea (similar a inline-block)
flex Contenedor en bloque (similar a block)

div {
display: inline-flex;
margin-bottom: 5px;
}
p {
width: 100px;
border: black 1px solid;
margin: 2px;
}

div {
display: flex;
margin-bottom: 5px;
}
p {
width: 100px;
border: black 1px solid;
margin: 2px;
}

• Dirección de los ejes (flex-direction):

Cambia la orientación del eje principal del contenedor para que se oriente en horizontal (por
defecto) o en vertical.
VALOR DESCRIPCIÓN
row Dirección del eje principal en horizontal.
 row-reverse Dirección del eje principal en horizontal (invertido).
colum Dirección del eje principal en vertical.
colum-reverse Dirección del eje principal en vertical (invertido).

div { div {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
} }
p { p {
width: 100px; width: 100px;
border: black 1px solid; border: black 1px solid;
margin: 2px; margin: 2px;
} }

• Dirección de los ejes (flex-wrap):

Evita o permite organizar las cajas en una o varias líneas.
VALOR DESCRIPCIÓN
nowrap Ítems en una sola línea (por defecto)
wrap Ítems en modo multilínea.
wrap-reverse Ítems en modo multilínea en dirección inversa.

div {
display: flex;
flex-wrap: no-wrap;
}

div {
display: flex;
flex-wrap: wrap;
}

div {
display: flex;
flex-wrap: wrap-reverse;
}

• Alineación sobre el eje principal (justify-content):

Establece la forma en que se reparte el espacio libre disponible en el eje principal.
VALOR DESCRIPCIÓN

flex-start Agrupa los ítems al principio del eje principal dejando

espacio libre al final (por defecto).
flex-end Agrupa los ítems al final del eje principal.
center Agrupa los ítems al centro del eje principal.

space-between Distribuye los ítems dejando el máximo espacio para

separarlos.
 space-around Distribuye los ítems dejando el mismo espacio
alrededor de ellos (izq/dcha).

space-evently Distribuye los ítems dejando el mismo espacio

(solapado) a izquierda y derecha.

div {
display: flex;
justify-content: flex-start;
}

div {
display: flex;
justify-content: flex-end;
}

div {
display: flex;
justify-content: center;
}

div {
display: flex;
justify-content: space-between;
}

div {
display: flex;
justify-content: space-around;
}

• Alineación sobre el eje principal (align-content):

Sirve para los contenedores flex multilínea, contenedor en que los ítems no caben en el ancho
disponible y por ello el eje principal se divide en múltiples líneas (flex-wrap: wrap).
VALOR DESCRIPCIÓN
flex-start Agrupa los ítems al principio del eje principal.
flex-end Agrupa los ítems al final del eje principal.
center Agrupa los ítems al centro del eje principal.
space-between Distribuye los ítems desde el inicio hasta el final.

space-around Distribuye los ítems dejando el mismo espacio a

los lados de cada uno.

stretch Estira los ítems para ocupar de forma equitativa

todo el espacio (por defecto).

div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: flex-start;
}

div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: flex-end;
}
 div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: center;
}

div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: space-between;
}

div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: space-around;
}

div {
display: flex;
height: 10em;
flex-wrap: wrap;
align-content: stretch;
}

• Alineación sobre el eje secundario (align-items):

Alinea los ítems en el eje secundario del contenedor.
VALOR DESCRIPCIÓN
flex-start Alinea los ítems al principio del eje secundario.
flex-end Alinea los ítems al final del eje secundario.
center Alinea los ítems al centro del eje secundario.
Alinea los ítems estirándolos del modo que
stretch cubran desde el inicio hasta el final del
contenedor (por defecto).

baseline Alinea los ítems en el contenedor según la base

del contenido de los ítems del contenedor.

div {
display: flex;
align-items: flex-start;
}

div {
display: flex;
align-items: flex-end;
}

div {
display: flex;
align-items: center;
}

div {
display: flex;
align-items: stretch;
}
 div {
display: flex;
align-items: baseline;
}

• Alineación sobre el eje secundario (align-self):

Alinea las cajas de forma independiente en el eje secundario, funciona exactamente igual que
align-items.
VALOR DESCRIPCIÓN
flex-start Alinea los ítems al principio del contenedor.
flex-end Alinea los ítems al final del contenedor.
center Alinea los ítems al centro del contenedor.
stretch Alinea los ítems estirándolos al tamaño del contenedor.
baseline Alinea los ítems en el contenedor según la base de los ítems.

div {
display: flex;
align-items: flex-end;
}
p.especial {
align-self: flex-start;
border-color: blue;
}

div {
display: flex;
align-items: flex-start;
}
p.especial {
align-self: flex-end;
border-color: blue;
}

div {
display: flex;
align-items: flex-start;
}
p.especial {
align-self: center;
border-color: blue;
}

div {
display: flex;
align-items: flex-start;
}
p.especial {
align-self: stretch;
border-color: blue;
}

div {
display: flex;
align-items: flex-start;
}
p.especial {
align-self: baseline;
border-color: blue;
}
• Propiedades de hijos:
- flex-grow: Hace que los elementos crezcan hasta ocupar todo ele spacio disponible en el
eje principal. Toma valores enteros que indican la proporción en la que el elemento se va a
expandir o encoger.
div {
display: flex;
}
p {
flex-grow: 1;
border: black 1px solid;
margin: 2px;
}
p.mayor{
flex-grow: 2;
}

- flex-shrink: Declara la proporción en la que el elemento se va a estrechar cuando su

contenido no cabe en el espacio disponible en el eje principal. Toma valores enteros.
div {
display: flex;
}
p {
flex-shrink: 1;
border: black 1px solid;
margin: 2px;
}
p.mayor{
flex-shrink: 2;
}

- flex-basis: Establece el tamaño inicial del elemento, antes de que se reparta en su caso
en el espacio libre.
div {
display: flex;
}
p {
flex-basis: 120px;
border: black 1px solid;
margin: 2px;
}

• Orden de los ítems (order):

Modifica y establece el orden de los ítems según una secuencia numérica. Por defecto tienen
un order: 0, cuando se colca un order con valor entero se recolocan los ítems según su
número.
div {
display: flex;
}
p.uno{
order: 3;
}
p.dos{
order: 1;
}
p.tres{
order: 4;
}
p.cuatro{
order: 2;
}
• Propiedad (gap):
Se utiliza para generar espacios entre filas y espacios entre columnas.

row-gap: 10px;
column-gap: 20px;

gap: 40px 20px;

• Tamaño base para los ítems (flex-basis):

Especifica el ancho base inicial de un flex-item, si se mantiene el valor en auto respetará
el ancho y alto previamente establecidos (si existe), si se escribe un flex-basis con
valores específicos sobrescribirá los valores de ancho y alto.

• Crecimiento del main-size (flex-grow):

Controla que tanto crecerá el flex-item para rellenar el espacio sobrante, el valor solo
puede ser un numero entero (no negativo), solo se aplica si el tamaño del contenedor es
mayor a la suma de los flex-item y sus márgenes.
Calcular cuánto crecerán los flex-item: X = EspacioSobrante/(suma flex-grow)

5 flex-items de 100px x 100px donde el flex-container tiene un ancho de 700px,

entonces sobran 200px para poder repartirlo. Aquí entra el flex-grow.
X = 200px/(1+2+1+2+2)= 25px
Por cada unidad de flex-grow se adiciona 25px y se sabrá el nuevo ancho de los flex-
item
Elemento Crecimiento flexible Adicción TOTAL
Item 1 1 25px 125px
Item 2 2 50px 150px
Item 3 1 15px 125px
Item 4 2 50px 150px
Item 5 2 50px 150px

De esta manera flex-grow sirve para rellenar el espacio sobrante de flex-container entre
todos sus flex-items

• Encogimiento del main-size (flex-shrink):

Controla como se encogerá un flex-item para así llenar el contendor de acuerdo con su
número flex-shrink, cuando el tamaño por defecto de los flex-item sea mayor al de su
contenedor flex-container.
Calcular cuánto encogerá los flex-item: X = EspacioFaltante/(suma flex-grow)

4 flex-items de 250px x 100px donde el flex-container tiene un ancho de 550px, el ancho

total de los 4 flex-items es de 1000px(250·4) pero el contendor solo es de 550px. Si
queremos que algunos flex-items ocupen más o menos espacio entonces se usa el flex-
shrink.

Existe un déficit de 450px(1000-550) que se debe acomodar.

X = 450px/(2+2+3+1)= 56,25px
Se restaura 56.25 a 250px(ancho original) por unidad de flex-shrink
Elemento Flexión-encogimiento Adicción TOTAL
Item 1 2 56,25px * 2 = 112,5px 137,5px
Item 2 2 56,25px * 2 = 112,5px 137,5px
Item 3 3 56,25px * 3 = 168,75px 81.25px
Item 4 1 56.25px 193.75px

GRID CSS:
Sistema de maquetación web que divide la página en una cuadricula o rejilla (grid) a partir
de la cual se posicionan los diferentes elementos de manera más sencilla.

- Contenedor: Elemento padre que definirá la cuadricula o rejilla.

- Ítem: Cada uno de los hijos que contiene la cuadrícula (elemento contenedor).
- Celda (grid cell): Cada uno de los cuadraditos (unidad mínima) de la cuadricula.
- Area (grid área): Región o conjunto de celdas de la cuadricula.
- Banda (grid track): Banda horizontal o vertical de celdas de la cuadricula.
- Línea (grid line): Separador horizontal o vertical de las celdas de la cuadricula.

<div class="grid"> <!-- contenedor -->

<div class="a">Item 1</div> <!-- cada uno de los ítems del grid-->
<div class="b">Item 2</div>
<div class="c">Item 3</div>
<div class="d">Item 4</div>
</div>
• Activar el modo Grid (display:):
TIPO DE ELEMENTO DESCRIPCIÓN
inline-grid Cuadrícula con ítems en línea (similar a inline-block)
grid Cuadrícula con ítems en bloque (similar a block)

.inline-grid-container {
display: inline-grid;
}
.blue {
background-color: blue;
color: white;
margin: 2px;
padding: 5px;
text-align: center;
}

.grid-container {
display: grid;
}
.red {
background-color: red;
color: white;
margin: 2px;
padding: 5px;
text-align: center;
}

• Grid con filas y columnas (grid-template-XXX):

PROPIEDAD VALOR DESCRIPCIÓN
grid-template-columns [col1][col2][col3]... Establece el tamaño de cada columna.
grid-template-rows [fila1][fila2][fila3]... Establece el tamaño de cada fila.

.grid {
display: grid;
grid-template-columns: 50px 300px;
grid-template-rows: 200px 75px;
}

Cuadricula con 2 columnas y con 2 filas.

Dependiendo del número de ítems que tenga el
contenedor grid, tendremos una cuadricula de
2x2 elementos (4 ítems), 2x3 elementos (6
ítems), etc. Si el numero de ítems es impar, la
ultima celda de la cuadricula se quedará vacia.
o Unidad Fracción Restante (fr):
Es una unidad relativa que simboliza una fracción de espacio restante en el grid.

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 2fr 1fr;
}

El tamaño de ancho de la cuadricula se

divide en 2 columnas (mismo tamaño de
ancho para cada una) y el tamaño de alto
de la cuadricula se divide en 2 filas donde
la primera ocupa el doble que la segunda.

o Filas y columnas repetitivas (repeat()):

En algunos casos se puede necesitar indicar las mismas cantidades en un numero alto de
veces, para ello se puede utiliza repeat() para indicar repetición de valores, indicando el
numero de veces que se repite y el tamaño en cuestión.
Expresión a utilizar: repeat([núm de veces], [valor o valores])

.grid { Se crea una cuadricula con 4

display: grid;
columnas y 2 filas.
grid-template-columns: 100px repeat(2, 50px) 200px;
grid-template-rows: repeat(2, 50px 100px);
}

.grid {
display: grid;
grid-template-columns: 100px 50px 50px 200px;
grid-template-rows: 50px 100px 50px 100px;;
}

• Grid por áreas:

PROPIEDAD DESCRIPCIÓN
grid-template-areas Indicar la disposición de las áreas en el grid (cada texto “” es una fila).
grid-area Indica el nombre del área (se usa ítems hijos del grid).

.grid { - Ítem 1, la cabecera (head) ocupa

display: grid;
grid-template-areas: "head head" toda la parte superior.
"menu main" - Ítem 2, el menú (menu) ocupa el
"foot foot";
área izquierda del grid.
}
- Ítem 3, el contenido (main) ocupa el
.a { grid-area: head; background: blue } área derecha del grid.
.b { grid-area: menu; background: red }
.c { grid-area: main; background: green } - Ítem 4, el pide de cuadricula (foot)
.d { grid-area: foot; background: orange } ocupa toda la zona inferior del grid.
• Huecos o espacios entre celdas en grid:
PROPIEDAD DESCRIPCIÓN
column-gap Establece el tamaño de espacio entre columnas (líneas verticales).
row-gap Establece el tamaño de espacio entre filas (líneas horizontales).
gap Establece el tamaño de espacio entre filas y columnas.

.grid {
column-gap: 100px;
row-gap: 10px;
}

El resultado sería hueco entre columnas de

100px y huecos entre filas de 10px.

.grid {
/* gap: <row-gap> <column-gap> */
gap: 20px 80px;

/* gap: <row column-gap> */

gap: 40px; /* Equivalente a gap: 40px 40px; */
}

• Alineación a lo largo del eje horizontal (justify-items):

Distribuye los elementos en el eje horizontal (fila), se aplican sobre el elemento contenedor
padre, pero afectan a los ítems hijos, por lo que actúan sobre la distribución de cada uno
de los hijos.
VALOR DESCRIPCIÓN
start Alinea los elementos para que queden al ras con el
borde inicial de su celda.
end Alinea los elementos para que queden al ras con el
borde final de su celda.
center Alinea los elementos en el centro de su celda.
stretch Llena todo el ancho de la celda (por defecto).
 .container {
justify-items: start;
}

.container {
justify-items: end;
}

.container {
justify-items: center;
}

.container {
justify-items: stretch;
}

• Alineación a lo largo del eje vertical (align-items):

Distribuye los elementos en el eje vertical (columna), se aplican sobre el elemento
contenedor padre, pero afectan a los ítems hijos, por lo que actúan sobre la distribución de
cada uno de los hijos.
VALOR DESCRIPCIÓN
start Alinea los elementos para que queden al ras con el
borde inicial de su celda.
end Alinea los elementos para que queden al ras con el
borde final de su celda.
center Alinea los elementos en el centro de su celda.
stretch Llena toda la altura de la celda (por defecto).
baseline Alinea elementos a lo largo de la línea de base de texto.

.container {
align-items: start;
}

.container {
align-items: end;
}

.container {
align-items: center;
}

.container {
align-items: stretch;
}
• Modificar la distribución del contenido en el eje horizontal (justify-content):
Distribuye espacios y alinea de forma horizontal al conjunto de los elementos, se aplican
sobre el elemento contenedor padre, pero afectan a los ítems hijos, por lo que actúan
sobre la distribución de cada uno de los hijos.
VALORES DESCRIPCIÓN
start Alinea la cuadricula para que quede al ras con el borde inicial
del contenedor.
end Alinea la cuadricula para que quede al ras con el borde final
del contenedor.
center Alinea la cuadricula en el centro del contenedor.
stretch Cambia el tamaño de los elementos de la cuadricula para
permitir que la cuadricula ocupe todo el ancho del contenedor.
space-around Distribuye el espacio entre los elementos dejando el mismo
espacio alrededor de ellos (izq/dcha).
space-between Distribuye el espacio entre los elementos dejando el máximo
espacio para separarlos, sin espacio en los extremos.
space-evenly Distribuye el espacio entre los elementos dejando el máximo
espacio para separarlos incluido en los extremos.

.container { .container { .container {

justify-content: start; justify-content: end; justify-content: center;
} } }

.container { .container {
justify-content: stretch; justify-content: space-around;
} }

.container { .container {
justify-content: space-between; justify-content: space-evenly;
} }
• Modificar la distribución del contenido en el eje vertical (align-content):
Distribuye espacios y alinea de forma vertical al conjunto de los elementos, se aplican
sobre el elemento contenedor padre, pero afectan a los ítems hijos, por lo que actúan
sobre la distribución de cada uno de los hijos.
VALORES DESCRIPCIÓN
start Alinea la cuadricula para que quede al ras con el borde inicial
del contenedor.
end Alinea la cuadricula para que quede al ras con el borde final
del contenedor.
center Alinea la cuadricula en el centro del contenedor.
stretch Cambia el tamaño de los elementos de la cuadricula para
permitir que la cuadricula ocupe toda la altura del contenedor.
space-around Distribuye el espacio entre los elementos dejando el mismo
espacio a los lados de cada uno.
space-between Distribuye el espacio entre los elementos dejando el máximo
espacio para separarlos, sin espacio en los extremos.
space-evenly Distribuye el espacio entre los elementos dejando el máximo
espacio para separarlos incluido en los extremos.

.container { .container { .container {

align-content: start; align-content: end; align-content: center;
} } }

.container { .container {
align-content: stretch; align-content: space-around;
} }

.container { .container {
align-content: space-between; align-content: space-evenly;
} }
• Alinear un ítem hijo en el eje horizontal (justify-self):
Modifica la alineación del ítem hijo en el eje horizontal, solo se aplica sobre ese mismo
elemento hijo y no al contenedor.
VALORES DESCRIPCIÓN
start Alinea el elemento de la cuadricula para que quede al ras con
el borde inicial de la celda.
end Alinea el elemento de la cuadricula para que quede al ras con
el borde final de la celda.
center Alinea el elemento de la cuadricula en el centro de la celda.
stretch Llena todo el ancho de la celda (por defecto).

.item-a { .item-a {
justify-self: start; justify-self: end;
} }

.item-a { .item-a {
justify-self: center; justify-self: stretch;
} }

• Alinear un ítem hijo en el eje vertical (align-self):

Modifica la alineación del ítem hijo en el eje vertical, solo se aplica sobre ese mismo
elemento hijo y no al contenedor.
VALORES DESCRIPCIÓN
start Alinea el elemento de la cuadricula para que quede al ras con
el borde inicial de la celda.
end Alinea el elemento de la cuadricula para que quede al ras con
el borde final de la celda.
center Alinea el elemento de la cuadricula en el centro de la celda.
stretch Llena todo el ancho de la celda (por defecto).

.item-a { .item-a {
align-self: start; align-self: end;
} }
 .item-a { .item-a {
align-self: center; align-self: stretch;
} }

• Modificar la posición de los hijos donde va a comenzar o terminar una fila o

columna:
Determina la ubicación de un elemento de cuadricula dentro de la cuadricula haciendo
referencia a líneas de cuadricula especifica.
VALOR DESCRIPCIÓN
grid-column-start Indica en que columna empezará el ítem de la cuadricula.
grid-column-end Indica en que columna terminará el ítem de la cuadricula.
grid-row-start Indica en que fila empezará el ítem de la cuadricula.
grid-row-end Indica en que fila terminará el ítem de la cuadricula.

.grid {
display:grid;
}

.a {
grid-column-start: 1;
grid-row-end: 2;
}

Cuadricula de 4 elementos, en el que se indica la posición del ítem 1 (clase .a)

comenzando en la columna 1 y acabando en la columna 2.

Se indica que el ítem 1 (clase .a) debe

comenzar en la columna 1, pero acabar
en la columna 3 (ocupando la hipotética
primera y segunda celda).

Comienza el primer ítem en la columna

2 y se acaba al principio de la columna
3, por lo que la celda permanece en la
posición de la segunda columna,
grid-row-start hace que comience en
la fila 3, por lo que el ítem 1 se desplaza
a una nueva fila de la cuadricula
dejando en la anterior el ítem 4.