Propiedades de Alineación en CSS Grid
Contenido del curso
Propiedades de Alineación en CSS Grid
Contenido del curso
Juan Gui Arenas
César Palma
Raul Romero
Luis Fernando León Esqueda
Estefany Salas
Team Platzi
NEXU QUISPE HUAMAN
Rocio Quigua López
Jair Melecio Rodriguez Brito
John Alexander Rios Mora
Raul Romero
Rafael Martínez Rodríguez
Luis Fernando Valladares Castro
ARNULFO GARCIA FRANCO
José Armando Alvarez Torres
Denis Omar
CARLOS ALBERTO CORAL
Guadalupe Monge Barale
Vladimir Marcos Vega
Lautaro Agustin Barrera
Jesus David Vargas Guerra
Julian Castro
José Isidro Torres Caldea
Estefany Salas
Team Platzi
Angel Hernandez
Omar Gabriel Aguilar Moscoso
Michael Garcia
Jose Luis Grande Acevedo
Cristhyan Pacheco
Stalin Badillo
Julian Franco
Josué Ramírez Hernández
Jesús Lautaro Careglio Albornoz
NICOLAS ALBERTO CASTELLANO DE LA CRUZ
Johan Rodriguez
Maria Esther Mendoza Zafra
Joserph Camacho
Brad Neydan Velarde Fabian
KEVIN A. DERAS
Eddie Mora
Propiedades para la alineación de los items (elementos):
Propiedades para la alineación del container(El Contenedor):
Propiedades para la alineación de un solo item individual
place-content: shorthand de alineamientos de las celdas (items) como un todo con respecto a su contenedor. place-items: shorthand de alineamiento del contenido de cada celda con respecto su celda. place-self:shorthand de alineamiento del contenido de una celda con respecto a su celda.
Gracias por el resumen @juan 😄.
Viendo los comentarios, creo que me compliqué demás.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="grid-container"> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item"><span></span></div> <div class="item-center"></div> </div> </html>
*{ box-sizing: border-box; padding: 0; margin: 0; } body{ width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .grid-container{ display: grid; width: 449px; height: 449px; grid-template-columns: 200px 200px; grid-template-rows: 200px 200px; gap: 50px; place-content: center; background-color: #3a630d; } .item{ background-color: #add901; display: grid; place-items: end; } .item span{ display: block; height: 90px; width: 60px; background-color: #61a81e; } .item-center{ position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); height: 50px; width: 50px; background-color: #1f3207; }
Te quedó muy bien 🔥
THANKS, ERES EL ÚNICO QUE LO HA HECHO IGUAL QUE LA FIGURA
Muy bien me quedo igual !!!
Propiedades básicas de Grid: • Display Grid • Grid-template • Gaps • Grid-Auto
display: grid; grid-template-rows: 100px 100px 100px ; /filas 3/ grid-auto-columns: 100px; /tamaño columnas/ grid-auto-flow: column; /ordenado en columnas/ /row-gap: 15px;/ gap: 20px;
Propiedades de alineación de los ítems Justify-items: Alineación de manera horizontal en el espacio que haya Align-items: Alineación vertical Place items: Mezcla de las 2 Justify y Align Valores: start | end | center | stretch;
Propiedades de alineación del contenedor Justify-content: Alineación de manera horizontal en el espacio que haya Align-content: Alineación vertical Place-content: Mezcla de las 2 Justify y Align Valores: start | end | center | stretch |space-around | space-between |space-evenly; Propiedades de alineación del ítem Justify-self: Alineación de manera horizontal en el espacio que haya Align- self: Alineación vertical Place- self: Mezcla de las 2 Justify y Align Valores: start | end | center | stretch;
Propiedades básicas de Grid: • Display Grid • Grid-template • Gaps • Grid-Auto
display: grid; grid-template-rows: 100px 100px 100px ; /filas 3/ grid-auto-columns: 100px; /tamaño columnas/ grid-auto-flow: column; /ordenado en columnas/ /row-gap: 15px;/ gap: 20px;
Propiedades de alineación de los ítems .
Justify-items: Alineación de manera horizontal en el espacio que haya
Align-items: Alineación vertical
Place items: Mezcla de las 2 Justify y Align
. Valores:
start | end | center | stretch;
Propiedades de alineación del contenedor
Justify-content: Alineación de manera horizontal en el espacio que haya
Align-content: Alineación vertical
Place-content: Mezcla de las 2 Justify y Align
. Valores:
start | end | center | stretch |space-around | space-between |space-evenly;
Propiedades de alineación del ítem .
Justify-self: Alineación de manera horizontal en el espacio que haya
Align- self: Alineación vertical
Place- self: Mezcla de las 2 Justify y Align
. Valores:
start | end | center | stretch;
Muchas gracias por el aporte.
align-content | justify-content
. Especifica la alineación vertical (align-content) / horizontal (justify-content) de los elementos dentro de una flexbox o una cuadrícula.
align-content: flex-start; justify-content: flex-start;
Valores disponibles
flex-start - Cada línea solo llenará el espacio que necesita. El conjunto de elementos se moverán hacia el inicio del eje vertical / horizontal del contenedor.flex-end - Cada línea solo llenará el espacio que necesita. El conjunto de elementos se moverán hacia el final del eje vertical / horizontal del contenedor.center - Cada línea solo llenará el espacio que necesita . El conjunto de elementos se moverán hacia el centro del eje vertical / horizontal del contenedor.space-between - Cada línea solo llenará el espacio que necesita. El espacio restante aparecerá entre las líneas.space-around - Cada línea solo llenará el espacio que necesita. El espacio restante se distribuirá equitativamente alrededor de las líneasspace-evenly - Cada línea solo llenará el espacio que necesita. El espacio restante se distribuirá equitativamente entre las líneasstretch - Cada línea se estirará para llenar el espacio restante. Disponible únicamente para la alineacion vertical. .
align-items | justify-items
. Especifica la alineación vertical (align-items) / horizontal (justify-items) del contenido de cada elemento dentro una flexbox o una cuadrícula.
align-items: center; justify-items: center;
Valores disponibles
flex-start | start - Los elementos alinean al inicio del eje vertical / horizontal.flex-end | end - Los elementos alinean al final del eje vertical / horizontal.center - Los elementos alinean en el centro del eje vertical / horizontal.baseline - Los elementos alinean en la línea de base del eje vertical / horizontal.stretch - Los elementos extenderán a lo largo de todo el eje vertical / horizontal.. .
align-self | justify-self
. Especifica la alineación vertical (align-self) / horizontal (justify-self) del contenido de un elemento independiente dentro una flexbox o una cuadrícula.
align-self: center; justify-self: center;
Valores disponibles
auto - el objetivo utilizará el valor de la propiedad align-items.. .
place-content | place-items | place-self
.
Las 3 propiedades son un atajo que nos permite definir en una sola linea las propiedades align-* & justify-*
place-content: stretch space-between; place-items: center start; place-self: center start;
En todas las estructuras, el 1er valor corresponde a la propiedad align-* y el 2do valor a la propiedad justify-*. Si no se establece el 2do valor, se utilizara el primero como valor para ambas propiedades.
Muchas gracias por tu resumen, en la práctica me tambaleo y voy usando las propiedades a jaloneos, pero a nivel conceptual, estoy francamente peor, no he podido aprobar el curso y tu resumen me ha sido de mucha utilidad para dejar de confundir para que sirve cada una, en resumen lo que logré entender gracias a tu aporte es:
align = vertical
justify = horizontal
content = contenedor
items = elementos
self = elemento unitario
place = align + justify en una sola propiedad
Listo el pollo!
👏 Esta bien hecho
Buena idea incluir otro display: grid dentro de cada elemento, eso me facilito la posición en la esquina inferior...
HTML
<div class="container"> <div class="item"> <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana"> </div> <div class="item"> <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana"> </div> <div class="item"> <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana"> </div> <div class="item"> <img src="https://clubcrochetero.com/wp-content/uploads/2019/03/cropped-logo-club-crochetero.png" alt="lana"> </div> </div>
CSS
.container { border: 5px solid #e1bee7; background-color: #fff1ff; display: grid; grid-template-columns: 200px 200px; grid-auto-rows: 200px; gap:15px; height: 600px; place-content: center; } .item { width: 200px; height: 200px; background-image: url('https://cdn.pixabay.com/photo/2018/03/27/17/25/cat-3266673_960_720.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.9; display: grid; place-items: end; } img { width: 50px; height: 50px; }
preciosa la foto del michi, primer premio !!!
RETO
Cual es tu tema en VsCode?
El Theme creo que es Synthwave 84'
Me encantaaaaaaaa 😍😍😍😍
Intente hacerlo lo mas parecido posible, pero no encontre forma de darle color a las gaps de Css grid. Si saben como dejen sus sugerencias. Gracias!
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Justify and Align Reto 2</title> <link rel="stylesheet" href="./stylejustify-AlignReto2.css"> </head> <body> <div class="container"> <div class="item"> <div class="item-card"></div> </div> <div class="item"> <div class="item-card"></div> </div> <div class="item"> <div class="item-card"></div> </div> <div class="item"> <div class="item-card"></div> </div> </div> </body> </html>
CSS
* { padding: 0; margin: 0; box-sizing: border-box; } html { font-size: 62.5%; } .container { display: grid; height: 100vh; place-content: center; grid-template-columns: repeat(2, 200px); grid-template-rows: repeat(2, 200px); gap: 40px; } .item { background: #add901; display: grid; place-content: flex-end; /* con esto lo posicionamos Abajo a la Derecha */ } .item .item-card { height: 80px; width: 40px; background: #62a81e; }
lo logras con javascript
El color del gap nada mas es para dar a entender que ahi hay un Gap. Si necesitaras hacerlo, simplemente puede pintar el background y ya esta.
Código Emmet
div.contenedor>div.item.item-${$}*6
Genial! También tengamos en cuenta que cuando se trata de la etiqueta "div" ya no tenemos que especificarla, quedaría así:
.contenedor>.item.item-${$}*6
Mi resultado
Mi aporte.
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style-reto-2.css"> </head> <body> <div class="container"> <div class="item"><p></p></div> <div class="item"><p></p></div> <div class="item"><p></p></div> <div class="item"><p></p></div> </div> </body> </html>
CSS:
.container{ background-color: antiquewhite; height: 400px; width: 400px; display: grid; grid-template-rows: 100px 100px; grid-auto-columns: 100px; grid-auto-flow: column; place-content: center; } .item { padding: 0; background-color: #acda0a; display: grid; place-items: end; } .item p{ padding: 0; margin: 0; background-color: #60a923; width: 20px; height: 30px; } .item:nth-child(1){ border-right: 8px solid #396310; border-bottom: 8px solid #396310; } .item:nth-child(2){ border-top: 8px solid #396310; border-right: 8px solid #396310; } .item:nth-child(3){ border-left: 8px solid #396310; border-bottom: 8px solid #396310; } .item:nth-child(4){ border-top: 8px solid #396310; border-left: 8px solid #396310; }```
Aquí mi reto y mi código :D .
Resultado:
CSS:
<style> .contenedor, .item { display: grid; border-radius: 8px; font-size: 48px; font-family: "Courier New", Courier, monospace; font-weight: bold; color: white; } .contenedor { place-content: center; background-color: #f9ed69; border: 22px solid #f08a5d; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; gap: 20px; height: 260px; width: 260px; } .item { place-items: end; background-color: #6a2c70; border: 16px solid #b83b5e; line-height: 28px; } </style>
body:
<body> <div class="contenedor"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body>
Les comparto una pagina que habla mucho sobre este tema https://css-tricks.com/snippets/css/complete-guide-grid/#grid-properties Me ha ayudado mucho a comprender. No he tenido que hacer un curso de grid como este para entender el 70% de este fabuloso sistema de maquetado de sitios. Aun asi he aprendido cosas que no sabía como grid auto flow. Eso ayuda a no tener que recurrir a flex cuando vas a implementar las vistas de por ejemplo, un numero casi ilimitado de articulos de noticias, post de blogs, productos de ecomerce, usuarios de red social, etc. Estoy ahora mismo haciendo un foro chan/redit con django. Y estoy implementando tanto grid como flex, asi como diseño responsive. Es el proyecto mas serio que me he propuesto. En su momento les compartiré como va quedando.
También podemos usar la propiedad place-content de esta manera:
place-content: [valor del eje vertical] [valor del eje horizontal]
place-content: center end
La anterior línea de código centraría la grilla en el eje vertical y la pondría al final en el eje horizontal. Lo mismo podemos hacer con place-items y place-self
Mi reto:
Código:
Here is my challenge.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reto 1</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="contenedor"> <div class="item"><p></p></div> <div class="item"><p></p></div> <div class="item"><p></p></div> <div class="item"><p></p></div> </div> </body> </html>
* { margin: 0; padding: 0; } html{ box-sizing: border-box; } .contenedor{ display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px 100px; gap: 20px; grid-auto-flow: column; justify-content: center; align-content: center; background-color: darkgreen; height: 600px; } .item { display: inherit; background-color: greenyellow; } .item p{ display: inline-block; justify-self: end; align-self: end; width: 30px; height: 50px; background-color: green; }
Listoooooooooooooooo me demore 30 minutos
excelente, buen trabajo
Y el código?????
