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

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

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

15/28
Recursos

Aportes 193

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Homer麓s Web Page

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

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

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 (鈥渓铆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

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 鉁旔煐

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

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=鈥渆n鈥>
<head>
<meta charset=鈥淯TF-8鈥>
<meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥淚E=edge鈥>
<meta name=鈥渧iewport鈥 content=鈥渨idth=device-width, initial-scale=1.0鈥>
<title>Reto de Recetas</title>
<link rel=鈥渟tylesheet鈥 href=鈥渟tyles.css鈥>
</head>
<body>
<main class=鈥渃ontainer鈥>
<h1>Mis platos de Comida </h1>
<section class=鈥渄ishes鈥>
<img class=鈥渄ishes-plato1鈥 src=鈥https://i.pinimg.com/originals/fc/16/ab/fc16ab61c90fd99d1b11cc6af63fdd9e.jpg鈥 alt=鈥渆nchiladas suizas鈥>
<img class=鈥渄ishes-plato2鈥 src=鈥https://www.eluniversal.com.mx/sites/default/files/2019/12/19/platillos-mexicanos-extranjeros.jpg鈥 alt=鈥淭acos al Pastor鈥>
<img class=鈥渄ishes-plato3鈥 src=鈥https://www.travelreport.mx/wp-content/uploads/2017/09/Platillos-tipicos-de-Hidalgo.jpg鈥 alt=鈥減anuchos鈥>
<img class=鈥渄ishes-plato4鈥 src=鈥https://www.gastrolabweb.com/u/fotografias/m/2021/6/17/f850x638-14957_92446_5358.jpg鈥 alt=鈥淢ole Poblano鈥>
<img class=鈥渄ishes-plato5鈥 src=鈥https://www.elimparcial.com/__export/1554734623429/sites/elimparcial/img/2017/12/21/1786218-N.JPG_1359985867.jpg鈥 alt=鈥淧ozole鈥>

    </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: