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

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 “pequeños Tips”.
1- Les recomiendo “Figma”, o “Adobe 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 (“líneas de cuadrícula de columna”) u horizontales (“lí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 ✔🖥

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

Reto culminado

haber si entendí jajaja

Concepto de líneas

_

El Arequipe es de Perú!

https://alpina.com/

[]

![](

    .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;

    } 


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 “horizontal”.
que es lo que dicen en la clase pero no esto no significa que cambien su dirección.

https://intelligence.weforum.org/topics/a1Gb0000001k6I5EAI

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