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

Homer´s Web Page

A que no adivinan qué página elegí… 👀
.

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

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

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:

Mi 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

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

Challenge done.
De chess24

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

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 😅😅😅

Aqui mi aporte del layout de Musixmatch (El resto son componentes por sección) 😄

Reto :’ )

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.

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

Hola profe, el reto lo escogi con icon8

Les dejo mi aporte 🥴

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

Reto cumplid;

La vist de las pagina de alpina es diferente.

youtube

Yo utilice la pagina de kayak de esta manera

Reto: Blog de Chema Alonso

Hack the Box, si hay alguna sugerencia estaría muy agradecida 😃 saludos

reto:

Cada vez que veo componente pienso en react y reutilizar, jaja, la pereza en estado productivo

Reto:

Mi desafio asi me salio, no soy experta pero estoy haciendo mi máximo esfuerzo

<!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 de Recetas</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<main class=“container”>
<h1>Mis platos de Comida </h1>
<section class=“dishes”>
<img class=“dishes-plato1” src=“https://i.pinimg.com/originals/fc/16/ab/fc16ab61c90fd99d1b11cc6af63fdd9e.jpg” alt=“enchiladas suizas”>
<img class=“dishes-plato2” src=“https://www.eluniversal.com.mx/sites/default/files/2019/12/19/platillos-mexicanos-extranjeros.jpg” alt=“Tacos al Pastor”>
<img class=“dishes-plato3” src=“https://www.travelreport.mx/wp-content/uploads/2017/09/Platillos-tipicos-de-Hidalgo.jpg” alt=“panuchos”>
<img class=“dishes-plato4” src=“https://www.gastrolabweb.com/u/fotografias/m/2021/6/17/f850x638-14957_92446_5358.jpg” alt=“Mole Poblano”>
<img class=“dishes-plato5” src=“https://www.elimparcial.com/__export/1554734623429/sites/elimparcial/img/2017/12/21/1786218-N.JPG_1359985867.jpg” alt=“Pozole”>

    </section>

</main>

</body>
</html>

LOS ESTILOS

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
width: 1200px;
background-color: #E6E6FA;
}

h1{
font-size: 2rem;
font-weight: bold;
text-align: center;
margin: 10px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.dishes{
display: grid;
grid-template-columns:minmax(50px, max-content);
grid-template-rows: 200px;
gap: 25px;
justify-content: center;

}
.dishes-plato1{
width: 300px;
height: 220px;
}
.dishes-plato2{
width: 300px;
height: 220px;

}
.dishes-plato3{
width: 480px;
height: 445px;
grid-area: 1 / 2/ 2/3;
}
.dishes-plato4{
width: 300px;
height: 220px;
grid-area: 3 / 3 /2 /4;
}
.dishes-plato5{
width: 300px;
height: 220px;
grid-area: 2/1;

}

En Chrome hay una herramienta con la que puedes ver el grid de la página que tienes abierta.

Creo que hay páginas que se explican bien pensándolas como un conjunto de Grids. En este caso, por ejemplo, hay un grid padre (rojo) y un grid hijo (azul). ¿Qué opinan ustedes? 🤔

Con la pagina de Youtube.

Les comparto mi reto. 😄

Aqui va mi aporte. La mejor compañia de drones militares del mundo.

Mi reto me quedó muy sencillo. 😛

Mi propuesta a maquetar en este reto. Es obtenida de Frontend Mentor

Hola yo intente hacer el reto, pero quede con una duda un menu se puede hacer separado por celdas o se debe hacer con un track

Como yo lo había pensado (cuando no sabía que se debe hacer la Grid completa):

Este es el reto:
![](

Basado en uno de los retos de frontendmentor
https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP

Es una web muy compleja, pero creo que seria algo así.

Saga Falabella

Usé Youtube:

Yo me dedique a analizar con lujo de detalle la interfaz de GitHub 😅Me gusta mucho. Creo que adentro aun se podrían encontrar mas items pero en general así seria la vista:

Comparto mi aporte con la pagina de ZOOM 🚀🔥

acá mi reto

Así quedo mi reto

Utilice esta página como prueba XD.

Escogí youtube. La grid principal es la amarilla, la grid hijo es la roja. Interesante ver como en la grid principal elementos que se sienten separados, como lo son el menú lateral y el espacio de los videos, coinciden en sus líneas principales 🤔

Mi resultado…

Les comparto el mio. Lo hice de mi Instagram: