Lleva tus conocimientos de CSS a otro nivel

1

Tips para llevar tu conocimiento de CSS a otro nivel + Quices

驴De d贸nde venimos y en d贸nde estamos?

2

驴C贸mo fue pensado CSS cuando se cre贸?

3

Limitaciones de CSS y el problema de los elementos flotantes

4

Herramientas que nos han facilitado el camino

驴C贸mo se lleg贸 al concepto de CSS Grid?

5

驴CSS Grid es una idea nueva? La evoluci贸n de la especificaci贸n

6

驴Qu茅 significa Grid para CSS?

Control de alineamiento

7

T茅cnicas de alineamiento antes de CSS Grid: margin y line-height

8

T茅cnicas de alineamiento antes de CSS Grid: table-cell y positions

9

T茅cnicas de alineamiento antes de CSS Grid: pros y contras

10

Modos de escritura y ejes de alineamiento + Reto

11

Propiedades f铆sicas y l贸gicas en CSS + Quiz

12

T茅cnicas de alineamiento con Flexbox

13

Dibujemos con CSS + Reto

Conceptos generales para comenzar a trabajar con CSS Grid

14

Grid y las relaciones padre e hijos inmediatos + Qu铆z

15

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

16

隆Iniciemos nuestro proyecto! Fase de creatividad e identificaci贸n de elementos

Propiedades y valores para el elemento padre

17

Creando nuestro contenedor: 驴display: grid o display: inline-grid?

18

Creando filas, columnas y espaciado + Reto

19

Alineamiento en el elemento contenedor + Quiz

20

Generaci贸n autom谩tica de tracks + Qu铆z

21

Funciones: repeat(), minmax() y fit-content()

Propiedades y valores para los elementos hijos

22

隆Manos al c贸digo! Fase de construcci贸n de la grid principal de nuestro proyecto

23

Ubicaci贸n + Reto

24

Alineamiento en los elementos hijos + Quiz

25

隆Manos al c贸digo! Fase de ubicaci贸n y alineamiento

26

Continuando con la fase de ubicaci贸n y alineamiento

Lo que podemos lograr adicionalmente con CSS Grid

27

Responsive y CSS Grid

28

Contin煤a con el Curso de Dise帽o Web con CSS Grid y Flexbox

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column + Reto

15/28
Recursos

Aportes 244

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Homer麓s Web Page

A que no adivinan qu茅 p谩gina eleg铆鈥 馃憖
.

Honestamente jam谩s me ha gustado el UI de wikipedia, pero despu茅s de hacer este ejercicio, sigue sin gustarme.

Unos 鈥減eque帽os Tips鈥.
1- Les recomiendo 鈥淔igma鈥, o 鈥淎dobe XD鈥 para maquetar sus sitios.
2- 脡ste sitio me ayud贸 a comprender el suo de las columnas (principio) (
https://chrome.google.com/webstore/detail/css-grid-overlay/hajfilceeneohkmcakehndmaeonhlack ).
3- Por si necesitan ver un sitio como ejemplo, y comenzar a saber c贸mo podr铆an aplicar grid ( https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb ).
Por 煤ltimo, si quieren saber medidas ( https://www.mydevice.io/#compare-devices ).

Eleg铆 una web que siempre se me hizo algo ca贸tica. Una p谩gina de noticias de Per煤.

Y el subgrid de algunas de sus partes:

P.D. Elijan bien su voto 馃槬馃煡猬滒煙

  • Las celdas son cada cuadro de la grilla, como lo son en una tabla, como la de exel.
  • Las lineas son cada divisi贸n de las columnas y los row, todas ellas se pueden nombrar.
  • Un track es pr谩cticamente una columna o un row, y se declara con su grueso.
  • Un area es la combinaci贸n de celdas delimitada por el usuario por sus especificaciones en celdas, l铆neas y tracks.
  • axis es la alineaci贸n del contenido dentro o items o celdas de nuestra grid
  • gutters se traduce como canalones, y son los espacios entre celdas. Se parece al margin correspondiente a las o celdas de nuestra grid.

cuevana 鈾

Desde el inspector de Firefox se pueden ver las grid:

Esta pagina la hice como reto del curso Curso Pr谩ctico de HTML y CSS con el profesor Diego De Granda, donde como reto hab铆a que hacer el clon del navegador de wikipedia con CSS GRID.

P.D.: Quiz谩s se pod铆a hacer mejor, pero se cumpli贸 con el reto 馃槄馃槄馃槄

Lines, tracks, cell, area, gutters, grid axis, grid row, grid column

  • line聽son las l铆neas divisorias que componen la estructura de la cuadr铆cula. Pueden ser verticales (鈥渓铆neas de cuadr铆cula de columna鈥) u horizontales (鈥渓铆neas de cuadr铆cula de fila鈥) y residir a ambos lados de una fila o columna.

  • track聽es pr谩cticamente varias celdas adyacentes o juntas en una fila o columna, como tambi茅n pueden ser 3, 2 o las celdas adyacentes que se necesita.

  • areaEl espacio total rodeado por cuatro l铆neas de cuadr铆cula. Un 谩rea de cuadr铆cula puede estar compuesta por cualquier n煤mero de celdas de cuadr铆cula. Esta聽propiedad tambi茅n se puede utilizar para asignar un nombre a un elemento de la cuadr铆cula.

  • cell聽son cada cuadro de la grilla, como lo son en una tabla, como la de excel.


  • Grid row cuando pensamos en grid row vamos a pensar de forma vertical y empezamos a contar desde la linea 1 a la linea 6 (arriba a abajo)

  • Grid column cuando pensamos en grid column vamos a pensar de forma horizontal y empezamos a contar de la l铆nea 1 a la l铆nea 6 (izquierda a derecha)

  • axis聽es la alineaci贸n del contenido dentro o items o celdas de nuestra grid

    -row axis este eje es de forma horizontal o tambi茅n lo podemos conocer como inline axis

    -column axis este eje es de forma vertical tambi茅n lo conoces como block-axis

Mi reto 馃

Bueno, yo agarr茅 la opci贸n presentada en clase. Pienso que puede ser como la siguiente grid que marque.

Sin duda el header de la p谩gina que escog铆 se podr铆a seccionar m谩s, pero considero que el contenido seria en una sub-grid.

Challenge done.
De chess24

Este es un peque帽o resumen de la clase:

  • L铆nea:

  • Track: No tiene por que ocupar una fila o columna entera.

  • Celda:

  • 脕rea: Conjunto de celdas.

  • Column: Tenemos que indicar cuanto ocupa en el Grid, por eso delimitamos desde la linea en la que empieza la columna (3), hasta la linea en que acaba (4). (no vertical)

  • Row: Tenemos que indicar cuanto ocupa en el Grid, por eso delimitamos desde la linea en que empieza (2), hasta la linea en la que acaba (3). (no horizontal)

  • Glutters: Son las separaciones que damos entre celdas.

Reto :鈥 )

Me encanta la creatividad que pone teff en cada clase para hacerla mas divertida 馃挌

Les dejo mi aporte 馃ゴ

Aqui mi aporte del layout de Musixmatch (El resto son componentes por secci贸n) 馃槃

Eleg铆 mercado libre, aunque no se si la parte del slide estar铆a bien (Color azul)

Les dejo un sitio para practicar y entender:
https://grid.layoutit.com/

Done 鉁旔煐

grid row se cuenta como una fila pero se inicia desde la primera l铆nea de la cuadr铆cula es decir la primera l铆nea que compone la fila de la parte superior contamos desde all铆 hasta donde queramos que llegue el elemento a disponer grid column se cuenta como una columna pero se inicia desde la primera linea de la columna es decir la primera l铆nea que compone la columna que es desde la izquierda contamos desde all铆 hasta donde queramos nuestro elemento

Youtube parece bastante sencillo, o me equivoco?

El reto:

La verdad paso muy expr茅s cada concepto no profundizo, me hace tener que ir a ver la informaci贸n en otros lados sabiendo que pague por que me ense帽en aqu铆 y no en otro lugar 馃槮

RETO

este ser铆a el resultado de mi reto: ![](https://static.platzi.com/media/user_upload/2023-10-25_13h47_51-204d1ccf-00bb-4ad6-8480-c72bff3cb5e5.jpg)

Reto culminado

haber si entend铆 jajaja

Concepto de l铆neas

_

El Arequipe es de Per煤!

[]

![](

    .parent {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        background-image: url(imagenes/mundo.PNG);
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
        gap: 5px;
        }
        
        .div1 { grid-area: 1 / 1 / 3 / 2; }
        .div2 { grid-area: 3 / 1 / 4 / 2; }
        .div3 { grid-area: 4 / 1 / 5 / 2; }
        .div4 { grid-area: 1 / 2 / 4 / 4; }
        .div5 { grid-area: 4 / 2 / 5 / 4; }
        .div6 { grid-area: 1 / 4 / 2 / 5; }
        .div7 { grid-area: 2 / 4 / 3 / 5; }
        .div8 { grid-area: 3 / 4 / 5 / 5; }
        
        .div1, .div2, .div3, .div4, .div5, .div6,
        .div7, .div8, .div9{
            border: 4px solid red;

        }

Yo escog铆 la p谩gina de KFC, aunque me quedaron un poco chuecas las l铆neas

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
background-image: url(imagenes/mundo.PNG);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
width: 100%;
gap: 5px;
}

    .div1 { grid-area: 1 / 1 / 3 / 2; }
    .div2 { grid-area: 3 / 1 / 4 / 2; }
    .div3 { grid-area: 4 / 1 / 5 / 2; }
    .div4 { grid-area: 1 / 2 / 4 / 4; }
    .div5 { grid-area: 4 / 2 / 5 / 4; }
    .div6 { grid-area: 1 / 4 / 2 / 5; }
    .div7 { grid-area: 2 / 4 / 3 / 5; }
    .div8 { grid-area: 3 / 4 / 5 / 5; }
    
    .div1, .div2, .div3, .div4, .div5, .div6,
    .div7, .div8, .div9{
        border: 4px solid red;

    } 

![](C:\Users\HERRAM WEB\Desktop\platzi\imagenes)

Grid principal鈥

Grid Interna鈥

Algunas p谩ginas que pueden ayudar a comprender m谩s a fondo CSS Grid:
https://css-tricks.com/snippets/css/complete-guide-grid
https://learncssgrid.com

Hice la tarea con el website de OMG Ubuntu

reto solo con divs (codepen)
html

<div class="container">
  <div class="nav"></div>
  <div class="hijo1-padre">
    <div class="hijo1-padre-sub1"></div>
    <div class="hijo1-padre-sub2"></div>
  </div>
  <div class="hijo2-padre">
    <div class="hijo2-padre-sub"></div>
    <div class="hijo2-padre-sub"></div>
    <div class="hijo2-padre-sub"></div>
    <div class="hijo2-padre-sub"></div>
  </div>
  <div class="hijo3-padre">
    <div class="hijo3-padre-sub1"></div>
    <div class="hijo3-padre-sub2"></div>
  </div>
</div>

css

*{
  box-sizing:rder-box;
  color:white;
}
.container{
  background-color:black;
  width:400px;
  height:400px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr ;
  gap:5px;
  padding:5px;
}
.nav{
  background-color:red;
  display:inline-blok;
  grid-column: 1/5;
  grid-row:1/2;
}
.hijo1-padre{
  background-color:blue;
  display:inline-blok;
  grid-column: 1/2;
  grid-row:2/4;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr ;
  gap:5px;
  padding:5px;
}
.hijo1-padre-sub1{
  background-color:aqua;
  display:inline-blok;
  grid-column: 1/2;
  grid-row:1/2;
}
.hijo1-padre-sub2{
  background-color:aqua;
  display:inline-blok;
  grid-column: 1/2;
  grid-row:2/3;
}


.hijo2-padre{
  background-color:green;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr ;
  gap:5px;
  grid-column: 2/4;
  grid-row:2/4;
  padding:5px;
}

.hijo2-padre-sub{
  background-color:lime;
  display:inline-blok;
}

.hijo3-padre{
  background-color:yellow;
  display:inline-blok;
  grid-column: 4/5;
  grid-row:2/4;
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:1fr 1fr ;
  gap:5px;
  padding:5px;
}

.hijo3-padre-sub1{
  background-color:orange;
  display:inline-blok;
  grid-column: 1/2;
  grid-row:1/2;
}
.hijo3-padre-sub2{
  background-color:orange;
  display:inline-blok;
  grid-column: 1/2;
  grid-row:2/3;
}

Vanis io mi juego favorito

  • Rojo : Caja contenedora
  • Naranja : Grid padre
  • Amarillo : Grid hijo

no encontr茅 otra forma de compartir mi pc se bugi贸

Reto:

Hola a todos, ac谩 est谩 el reto de organizar las grids de la p谩gina:

Aqu铆 est谩 mi reto:

Intent茅 plantear el grid de la p谩gina de Microsoft, pero siento que se podr铆a mejorar.

A ver.

Reto:

Aqui el reto con la p谩gina de la empresa que elabora el mejor queso venezolano, hasta tuve el placer de trabajar alli.

Reto completado replicando una secci贸n de alimentos Polar:
.
.
.
Original:
.

.
.
.
Reto:
.

.
.
C贸digo:
HTML:
.

<body>
    <section class="container">
        <div class="item"><p>Estamos cerca de ti</p></div>
        <div class="item"><p>Tu enfoque polar</p></div>
        <div class="item"><p>Sala de prensa</p></div>
        <div class="item"></div>
        <div class="item"><p>@EmpresasPolar</p></div>
        <div class="item"></div>
        <div class="item"><p>Unete a nuestro equipo</p></div>
    </section>
</body>

.
CSS:
.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --Background-color: #ffffff;
    --Light-green: #b6bf00;
    --Mustard: #f9a72a;
    --Light-beige: #fff4c9;
    --Orange: #fb741a;
    --Light-blue: #00a8d7;
    --Gray: #e2e2e2;
    --Dark-blue: #005685;
}

html {
    font-size: 62.5%;
}

body {
    background-color: var(--Background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 70vw;
    height: 70vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

.item p {
    text-transform: uppercase;
    color: white;
    font-family: sans-serif;
    font-weight: 3rem;
}

.item:nth-of-type(1) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: var(--Light-green);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.item:nth-of-type(2) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: var(--Mustard);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item:nth-of-type(3) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: var(--Orange);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item:nth-of-type(4) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: var(--Light-beige);
}

.item:nth-of-type(5) {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    background-color: var(--Light-blue);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.item:nth-of-type(6) {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    background-color: var(--Gray);
}

.item:nth-of-type(7) {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    background-color: var(--Dark-blue);
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

Reto: Alpina hoy 2022

Escog铆 la web de Canva:

que dicen, como me quedo?

El verde es un grid dentro del grid rojo:

P谩gina de inicio de la anteriormente llamada Smash World Forums

As铆 me imagino la grid de alpina:

Reto completado!!

Tome figma como ejemplo

Aca mi reto con una parte de la pagina de codinGame!

como parte del reto escogi discod! 馃憖

Este maquetado que visualizo siento que es totalmente posible para mi, pero鈥
驴Realmente es correcto o hay una mejor/m谩s sencilla
manera?

las filas y las columnas se trabajan como siempre :
filas

fila 1
fila 2
fila 3 

columnas

c c c
o o o
l l l
u u u
m m m
n n n
a a a
1 2 3

hay que diferenciar que una cosa es lo que representan y otra se la manera en que se pueden contar
tanto las filas y las columnas.

claramente las filas se contaran en "vertical"
y las columnas en 鈥渉orizontal鈥.
que es lo que dicen en la clase pero no esto no significa que cambien su direcci贸n.

Hola profe, el reto lo escogi con icon8

Este es mi ejemplo, basado en lo aprendido.


Mi aporte 馃檶

Aporte del reto鈥 desde mi punto de vista se podria participnarl la pagina por secciones es decir el header se puede utilizar display-flex, la parte de main o el body se podria colocar la grilla y la parte de footer grilla o display flex. espero no equivocarme 馃槄


Hice el reto con el hompege de OpenSea.

Mi reto:

Mi primer grid en una pagina, gracias paint!

seguramente tengo errores, por favor corr铆janme
![](

Yo trabaj茅 con una p谩gina que tiene art铆culos muy buenos sobre emprendimiento y negocios peque帽os. Se llama TheBalancer.
.

Acabe el reto pero no puedo subir imagenes con este nuevo dise帽o jajaja, en el anterior si sabia como

Microsoft bing

Este es mi ejemplo:

<!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>BBC</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container1">
        <div>BBC News</div>
        <div></div>
        <div>Noticias, America Latina, Internacional, Ambiente, Coronavirus</div>
        <div>Economia, Ciencia, Salud, Cultura, Tecnologia  </div>
        <div>CentroAmerica, BBC Extra</div>
    </div>
    <div class="GranContenedor">
        <div class="container2">
            <div class="UltimaHora">Ultima Hora</div>
            <div class="TextoUlt">Rusia y Ucrania: Putin ordena el env铆o de tropas a Donetsk y Luhansk tras reconocer la independencia de las regiones rebeldes</div>
        </div>
    </div>
    <div class="container3">
        <div class="noticia">Qu茅 busca Putin en Ucrania y otras 6 preguntas sobre la crisis con Rusia</div>
        <div class="noticia">Riqueza extrema: Chile, el pa铆s donde los ultrarricos tienen el patrimonio m谩s grande de Am茅rica Latina</div>
        <div class="noticia">4 gr谩ficos que muestran el r谩pido ascenso militar de China (y c贸mo se compara con EE.UU. y otras potencias)</div>
        <div class="noticia">Credit Suisse: la enorme filtraci贸n de datos que revela que venezolanos acusados del saqueo de PDVSA ingresaron millones de d贸lares en el banco suizo</div>
        <div class="noticia">Rusia-Ucrania: en qu茅 consisten los ataques de bandera falsa y cu谩les son los m谩s recordados</div>
        <div class="noticia">"Parece que perd铆 puntos de coeficiente intelectual": la neur贸loga que investiga (y sufre) covid de larga duraci贸n</div>
        <div class="noticia">Truth Social: Trump estrena su red social mientras sigue vetado en Twitter</div>
        <div class="noticia">Qu茅 es el "factor abuela" y c贸mo ayuda a la conservaci贸n del espa帽ol en EE.UU.</div>
    </div>
</body>
</html>
body{
    margin: 0;
    padding: 0;
}

.container1{
    padding: 10px;
    display: grid;
    grid-template: repeat(3,1fr) / repeat(2,1fr);
    background-color: darkred;
    color: white;
    font-size: 20px;
}
.GranContenedor{
    width: 100%;
    display: flex;
    justify-content: center;
}


.container2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-top: 100px;
    text-align: center;
    width: 80%;
}

.UltimaHora{
    background-color: darkred;
    color: white;
    font-size: 60px;
    text-align: center;
    padding: 40px;
}

.TextoUlt{
    padding: 40px;
    font-size: 20px;
}

.container3{
    margin-top: 60px;
    display: grid;
    grid-template: repeat(4,1fr) / repeat(4,1fr);
    text-align: center;
}

.noticia{
    font-size: 16px;
    font-weight: bold;
    margin: 10px;
}

me gusta su risa

Repo de Github del curso

As铆 lo hize