Lleva tus conocimientos de CSS a otro nivel
Tips para llevar tu conocimiento de CSS a otro nivel + Quices
¿De dónde venimos y en dónde estamos?
¿Cómo fue pensado CSS cuando se creó?
Limitaciones de CSS y el problema de los elementos flotantes
Herramientas que nos han facilitado el camino
¿Cómo se llegó al concepto de CSS Grid?
¿CSS Grid es una idea nueva? La evolución de la especificación
¿Qué significa Grid para CSS?
Control de alineamiento
Técnicas de alineamiento antes de CSS Grid: margin y line-height
Técnicas de alineamiento antes de CSS Grid: table-cell y positions
Técnicas de alineamiento de CSS Grid: pros y contras
Modos de escritura y ejes de alineamiento + Reto
Propiedades físicas y lógicas en CSS + Quiz
Técnicas de alineamiento con Flexbox
Dibujemos con CSS + Reto
Conceptos generales para comenzar a trabajar con CSS Grid
Grid y las relaciones padre e hijos inmediatos + Quíz
Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto
¡Iniciemos nuestro proyecto! Fase de creatividad e identificación de elementos
Propiedades y valores para el elemento padre
Creando nuestro contenedor: ¿display: grid o display: inline-grid?
Creando filas, columnas y espaciado + Reto
Alineamiento en el elemento contenedor + Quiz
Generación automática de tracks + Quíz
Funciones: repeat(), minmax() y fit-content()
Propiedades y valores para los elementos hijos
¡Manos al código! Fase de construcción de la grid principal de nuestro proyecto
Ubicación + Reto
Alineamiento en los elementos hijos + Quiz
¡Manos al código! Fase de ubicación y alineamiento
Continuando con la fase de ubicación y alineamiento
Lo que podemos lograr adicionalmente con CSS Grid
Responsive y CSS Grid
Continúa con el Curso de Diseño Web con CSS Grid y Flexbox
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 36
Preguntas 3
Les recomiendo que, si están trabajando en Chrome, pueden hacer lo siguiente para que puedan los números de línea de su Grid 😄:
.
.
De esa manera se habilitará la grid en su layout mostrando los números de línea 😄
Diablos, debo admitirlo, tengo casi un año como developer y aprendí CSS Grid casi desde el comienzo, y nunca supe o me imaginé que un item se podía sobreponer a otro en el grid, es decir, que parte de uno <div> o todo del mismo pudiera ocupar una celda que estuviera siendo ocupada por otro <div> 😱😱😱
Desde la clase 22 me adelanté e hice la página que está haciendo la profesora. No sabía que con Grid podías superponer elementos uno encima de otro, pensé que tendría que usar position, pero fue todo muy sencillo 😃 me terminó de encantar Grid ^^
No soy muy creativo, solo le cambié algunos colores, pero hay una manera más simple para asignarle a cada item el área que ocupará
grid-area: #1 / #2 / #3 / #4;
Esto junta grid-column y grid-row
En el #1 va el número en el que inicia la fila (row) y el #3 en el que termina.
En el #2 va el número en el que inicia la columna (column) y en el #4 en el que termina
Por ejemplo para el item-1 sería:
.item-1 {
background-color: #DD1144;
grid-area: 6 / 1 / -2 / 1;
}
Les dejo el link del código de como quedó le que hice 😃
https://codepen.io/brandonargel/pen/JjbLvbJ
Y también una imagen 😄
Yo la verdad me siendo mucho mas comodo trabajando con VSCode y Chrome.
Me gustan muchos los conceptos que se aprendieron en este curso
Cuando hagan Overlap con Grid Layout pueden utilizar z-index para definir que elemento superpone al otro.
Aqui dejo mi avance con el proyecto:
Basado en esta imagen:
Acá el código:
HTML
<body>
<div class="grid">
<div class="grid-cell 1">
<img src="./css/assets/square-vector.svg" alt="vector">
<p class="special">Lorem ipsum dolor sit amet .</p>
</div>
<div class="grid-cell 2">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta dolores molestias unde inventore.</p>
</div>
<div class="grid-cell 3">
<p>
Trentenni <br>
e quarentenni <br>
hanno <br>
conquistato <br>
il potere
</p>
</div>
<div class="grid-cell 4">
E
</div>
<div class="grid-cell 5">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
</div>
<div class="grid-cell 6">
O
</div>
<div class="grid-cell 7">
R
</div>
<div class="grid-cell 8">
A
</div>
<div class="grid-cell 9">
?
</div>
<div class="grid-cell 10">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
</div>
<div class="grid-cell 11">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
</div>
<div class="grid-cell 12">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ex accusantium aperiam eaque aut consequuntur soluta .</p>
</div>
<div class="grid-cell 13">
</div>
</body>
CSS
@import url("https://fonts.googleapis.com/css2?family=Oswald:[email protected]&family=PT+Sans+Narrow&display=swap");
:root {
--black: #291e2e;
--red-violet: #b73283;
--rock-blue: #9dacc5;
--jely-bean: #25889f;
--white: #e5e5e5;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
body {
font-family: "Oswald", sans-serif;
width: 100%;
height: 100%;
color: var(--white);
background: rgb(183, 50, 131);
background: linear-gradient(
90deg,
rgba(183, 50, 131, 1) 0%,
rgba(41, 30, 46, 1) 10%,
rgba(41, 30, 46, 1) 90%,
rgba(37, 136, 159, 1) 100%
);
font-size: 1.5rem;
}
.special {
font-family: "PT Sans Narrow", sans-serif;
}
.grid {
display: grid;
grid-template-columns: 1fr 9.63% 18.22% 11.45% 11.97% 33.07% 6.51% 1fr;
grid-template-rows: 70px 250px 160px 470px 415px 210px 210px 220px 250px 70px;
/* grid-gap: 3px; */
height: 100%;
}
.grid-cell:nth-child(1) {
/* display: flex;
flex-direction: column;
justify-content: space-between;
outline: 1px solid lightblue; */
grid-column: 2 / 4;
grid-row-start: 2;
}
.grid-cell:nth-child(1) img {
max-width: 100%;
}
.grid-cell:nth-child(2) {
grid-area: 2 / -2 / 4 / -3;
}
.grid-cell:nth-child(2) p {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
padding-top: 20px;
}
.grid-cell:nth-child(3) {
grid-area: 4 / 3 / 5 / 5;
}
.grid-cell:nth-child(3) p {
text-align: right;
font-size: 6rem;
}
.grid-cell:nth-child(4) {
grid-area: 4 / 5 / 5 / 6;
align-self: end;
text-align: center;
font-size: 10rem;
font-weight: 900;
}
.grid-cell:nth-child(5) {
grid-area: 4 / -2 / 5 / -3;
}
.grid-cell:nth-child(5) p {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
padding-top: 50px;
}
.grid-cell:nth-child(6) {
grid-area: 5 / 5 / 6 / 6;
align-self: end;
text-align: center;
font-size: 10rem;
font-weight: 900;
}
.grid-cell:nth-child(7) {
grid-area: 6 / 5 / 7 / 6;
align-self: end;
text-align: center;
text-align: center;
font-size: 10rem;
font-weight: 900;
}
.grid-cell:nth-child(8) {
grid-area: 7 / 5 / 8 / 6;
align-self: end;
text-align: center;
font-size: 10rem;
font-weight: 900;
}
.grid-cell:nth-child(9) {
grid-area: 8 / 5 / 9 / 6;
align-self: end;
text-align: center;
font-size: 10rem;
font-weight: 900;
}
.grid-cell:nth-child(10) {
grid-area: -3 / 2 / -5 / 3;
}
.grid-cell:nth-child(10) p {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
padding-top: 50px;
padding-bottom: 50px;
}
.grid-cell:nth-child(11) {
grid-area: -2 / 2 / -3 / 3;
}
.grid-cell:nth-child(11) p {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
}
.grid-cell:nth-child(12) {
grid-area: -3 / -2 / -5 / -3;
}
.grid-cell:nth-child(12) p {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
}
.grid-cell:nth-child(13) {
grid-area: -2 / -2 / -3 / -3;
align-self: end;
width: 100%;
height: 80%;
background-color: var(--white);
}
Si son como yo entendemos mejor asi con MANOS AL CODIGO jejeje
para los que usan su editor de codigo y tiene emmet esta simple linea les ahorra tiempo
.container>.item$*5
Para los que les quedo la duda de como controlar quien esta encima de quien osea controlar la sobreposición de los contenedores aqui les explico:
Inicialmente tenemos que el contenedor verde esta debajo de los otros dos contenedores, pero yo quiero que ese este encima de los dos, para ello tenemos que recurrir al html el cual esta maquetado de esta forma
<body>
<main class = "principal-container">
<div class="container1" >1</div> // contenedor verde
<div class="container2">2</div> //contededor azul
<div class= "container3">3</div> //contenedor cafe
</main>
</body>
Para hacer que el contenedor este al frente de los dos tengo que mi “container1” mandarlo al final de los otros contenedores algo asi
<body>
<main class = "principal-container">;
<div class="container2">2</div> //contededor azul
<div class= "container3">3</div> //contenedor cafe
<div class="container1" >1</div> // contenedor verde
</main>
</body>
Y con ello la visualización me queda asi, si quieren que quede encima del uno y abajo del otro o en la disposición que deseen solo van jugando con la posición de los contenedores en el html. Espero les sirva 😃
Les comparto mi proyecto, la paleta de colores que decidí usar fue en base a las luces neón 😃
acá les dejo los colores
:root{
--dark-blue:#1C1B4D;
--light-blue:#179181;
--pink:#880E65;}
No es muy bonito que digamos… pero lo importante es aprender y practicar:
https://codepen.io/Londrack/full/oNZZrxa
Excelente curso
Al fin un curso practico!! asi es mucho mas fácil entender los conceptos!!
El curso esta muy bueno, veo que se quejan mucho de que no hace codigo pero si estas aca es porque codigo vas a desayunar, comer y cenar, hazlo aplica las propiedades y practica veras como se hace mas entendible, mi consejo seria de que primero tomen los curso de Diego de Granda basicos, y sepan usar flexbox como minimo ya que es muy parecido, juegen para Flexbox con el de las ranitas y para grid con el de garden, saludos prros!
La verdad me parece muy intersante esta manera de ubicar los elementos independientes, está muy cool y la verdad estoy medio copiando el diseño de la profe para poder interiorizar con una guia directa, aunque el tema de lineas es algo confuso jeje.
Con el navegador hay una forma de saber las lineas asignadas a grid, lo hice con edge pero debe funcionar también en Chrome, espero les sea útil
Tenía pequeñas dudas, pero con esta clase, se aclaro todo
Perfecto!
Que tal campeon, buen dia. en photoshop, puedes ver las grillas.
/*. wese */
* do not copy */
/* nice */
Aqui les comparto mi proyecto, es la marca de mi emprendimiento The Beardman, Camisetas serigrafiadas de musica alternativa y cultura
CSS
@font-face {
font-family: AkiraExpanded;
src: url("/assets/fonts/Akira-Expanded.otf"), local("Akira Expanded");
font-weight: bold;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-family: "AkiraExpanded";
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
header {
display: flex;
justify-content: space-between;
margin: 5px 100px;
}
.logo {
display: flex;
align-items: center;
}
.logo p {
margin-left: 13px;
font-weight: 800;
font-size: 1.8rem;
line-height: 21px;
color: #000000;
}
header .links
{
display: flex;
justify-content: flex-end;
align-items: center;
width: 550px;
}
.links a
{
margin-inline-end: 62px;
font-weight: 800;
font-size: 1.6rem;
line-height: 18px;
text-decoration: none;
color: #000000;
}
.links a:last-child {
margin-inline-end: 0;
}
.links a:hover {
color: #8E05C2;
}
.icons {
display: flex;
align-items: center;
margin-inline-start: 91px;
}
.icons a {
margin-inline-end: 30px;
color: #000000;
}
.icons a:last-child {
margin-right: 0;
}
main .grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
min-height: 924px;
margin: 0 100px 16px;
}
.item1 {
background: url(/assets/cerati\ 1.png) center/ cover no-repeat;
}
.item2 {
grid-area: 1 / 2 / 3 / 3;
background: url(/assets/smashing\ pumpkins\ vertical\ 1.png) center / cover no-repeat;
}
.item3 {
background: url(/assets/Renton\ 1.png) center / cover no-repeat;
}
.item4 {
background: url(/assets/The_Cure_Killing_an_Arab\ 1.png) center / cover no-repeat;
}
.item5 {
background: url(/assets/Bjork\ 1.png) center / cover no-repeat;
}
.item7 {
background: url(/assets/tarantino\ Negra\ 1.png) center / cover no-repeat;
}
.item8 {
grid-area: 2 / 4 / 4 / 5;
background: url(/assets/tame\ impala\ vertical\ 1.png) center / cover no-repeat;
}
.item9 {
background: url(/assets/The_Clash\ 1.png) center / cover no-repeat;
}
.item10 {
background: url(/assets/fantomas\ 1.png) center / cover no-repeat;
}
.item11 {
background: url(/assets/kurt\ blanca\ 1.png) center / cover no-repeat;
}
footer .social {
display: flex;
justify-content: center;
margin: 5px 100px;
}
footer .social a svg {
width: 28px;
height: 28px;
margin-right: 45px;
}
footer .social:last-child {
margin-right: 0;
}
Definitivamente una de las cosas mas engorrosas tiende a ser la ubicacion del grid template area.
Lo que hice para evitar perdida de tiempo fue hacer el template area manual, trazar la grid en papel y luego organizar los elementos en su posicion y luego darles la ubicacion columna y fila respectivamente.
Sin embargo es un proceso de aprendizaje y esta bien, y realmente he aprendido mucho de CSS.
Lo que llevo hasta el momento, haciendo uso de “grid-area”, la verdad no me encantaron los resultados, pero ahí la llevo…
Grid me tiene enamorado 😍
Recomiendo esta extensión:
https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack
Me hace mucha ilusión lo que hemos estado aprendiendo.
Ya quiero ponerlo en practica en un proyecto real!!!
A mi me gusta mucho hacer uso de los span, primero solo le especifico desde que linea ya sea de fila o columna va a empezar, y a partir de ahi, cuantas celdas se va a expandir, se me hace mas facil que decirle que en que linea va a terminar. 😄
.container{
display:grid;
grid-template:repeat(10,1fr)/ repeat(10,1fr);
height:100vh;
}
.work{
display: flex;
justify-content: center;
align-items: center;
grid-row:1/ 2;
grid-column: 1 / 3;
}
.work:nth-child(1){
font-family: 'Nunito', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: white;
}
.contact{
display: flex;
justify-content: center;
align-items: center;
grid-row:1/ 2;
grid-column: 3 / 5 ;
}
.contact span{
font-family: 'Nunito', sans-serif;
font-size: 1.6rem;
font-weight: 400;
color: white;
}
.item-one{
border:2px dashed var(--color-one);
border-radius: 100%;
opacity: 50%;
grid-row: 3 / 6;
grid-column: 2 / 4;
}
.item-two{
border:2px dashed var(--color-two);
border-radius: 100%;
opacity: 50%;
grid-row: 4/ 7;
grid-column: 3 / 5;
}
.item-three{
border:2px dashed var(--color-one);
border-right: transparent;
opacity: 50%;
grid-row: 1/ 8;
grid-column: 8 / 11;
}
.item-four{
border:2px dashed var(--color-two);
opacity: 50%;
grid-row: 4 / 9;
grid-column: 7 / 10;
}
.hero{
display: flex;
justify-content: center;
align-items:center ;
color:white;
font-size: 4rem;
font-weight: bold;
border-radius: .5rem;
grid-row: 3/ 7;
grid-column: 6 / 10;
}
Esto fue lo que hice ,espero su feedback
tanto en grid-column, como en grid-row , podemos indicar la linea de inicio y luego indicar la cantidad de columnas o filas a ocupar , eso con x / span 3 por ejemplo.
Pueden utilizar el atributo:
grid-area: RowStart / ColumnStart / RowEnd / ColumnEnd;
puede ser confuso al principio pero es una forma mas corta
Aquí está el mio
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: papayawhip;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr);
justify-content: center;
align-content: center;
}
.item1 {
width: 100%;
height: 100%;
grid-area: 5/1/10/2;
background-color: yellow;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
.item2 {
width: 100%;
height: 100%;
grid-area: 7/1/9/4;
background-color: blueviolet;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
.item3 {
width: 100%;
height: 100%;
grid-area: 3/3/4/4;
background-color: red;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
.item4 {
width: 100%;
height: 100%;
grid-area: 6/5/11/8;
background-color: pink;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
.item5 {
width: 100%;
height: 100%;
grid-area: 5/6/8/9;
background-color: transparent;
border: 2px solid black;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
.item6 {
width: 100%;
height: 100%;
grid-area: 3/7/9/10;
background-color: transparent;
border: 2px solid green;
border-radius: 20px;
box-shadow: 10px 5px 5px black;
}
Fantastic class! 💚
Shortcut
para los que estén en chrome o edge cromium y quieran visualizar las grillas con su número de columnas o filas hagan simplemente click en el botón de grid que aparece en una etiqueta que tenga display grid y listo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.