Generación automática de tracks + Quíz

La respuesta al Quiz es B y C

.contanier {
    display: grid;
    grid-template: repeat(2, 100px) / repeat(2, 100px);
    grid-auto-flow: column; /* Agrega automaticamente columnas */
    grid-auto-flow: row; /* Agrega automaticamente Filas */
    grid-auto-columns: 100px; /* Define el tamaño de columnasa que se agregaran automaticamente*/
    grid-auto-rows: 100px; /* Define el tamaño de las filas que se agregaran automaticamente */
}

mmmm un poco enredado el tema, hubiese sido mejor algo práctico para entender un poco más

Se me hace imposible continuar este curso, no se puede mostrar código en imágenes, este tipo de curso debería ser totalmente practico, codificando cada clase, mostrando en el navegador lo que hace cada linea, no leer diapositivas.

Hmmmm si no entiendo mal, un track puede estar formado tanto vertical como horizontalmente, por lo que si es así, las respuestas serían la B y la C ya que estas propiedades permiten asignar el tamaño a los tracks que se generan de manera automática 🤔.
.
Algo que sí me pareció MindBlow al momento de aprender CSS Grid es el hecho de contar desde líneas y no desde tracks, es dificl adaptarse, pero cuando lo ves con las guías en el navegador, ya todo comienza a cobrar más sentido 😄

La verdad con todo respeto, no me gusta la forma como ella explica las cosas vengo con los videos seguidos y por ejemplo el profesor de Granda, explica todo codificando que es la idea, ir programando con el estudiante y como cada tema que se dicta lo abarca todo con código y ver como van cambiando los elementos de HTML con el código que se dicta para CSS y para este tema tan importante como CSS grid me perece fundamental ir haciendo código para uno entender mejor las cosas.

les recomiendo el curso de css grid del canal de youtube de “Falcon Master”

🤖 Generación automática de tracks

Track ⇒ Union de dos o más celdas dentro de una grid

• No todas las grillas tendrán items exactamente contados
  • No contaras con filas y columnas exactas por que los datos pueden ser dinámicos
• Para ello está la grid implícita
  • Te crea filas o columnas si las necesitas con anchos sin tamaño
• Para que se valla ordenando según lleguen nuevos elementos se debe usar esta propiedad
  • Don especificaremos el tamaño donde agregarlo

.container {
	grid-auto-columns: 60px;
}

• También podemos cambiar el orden visual de los elementos hijos

.container {
		grid-auto-flow: row | column | row dense | column dense;
}

RESUMEN: Debido a que existen casos que nunca sabremos cuantos elementos exactamente tendrá nuestra grilla entonces podemos generarla automáticamente con grillas implícitas.

dice que hay que practicar… porque no da las clases practicas para que podamos aprender en vez de tanta teoria? esta clase me parece super interesante e impornatnte y entendi la mitad.

me siento muy perdida hago el ejercicio y no me sale como el ejemplo esto sin practica es muy malo

Hizo falta más live-code en esta clase, poco comprendí este concepto.

En caso de que se nos dificulte el contar con las lineas, podemos contar con tracks utilizando la palabra reservada span.

	.item-a {
		grid-column: span 2;
	}

	.item-b {
		grid-column: span 2;
		grid-row: span 3;
	}
/* Tener en cuenta que se empezara a contar los span o espacios desde donde se encuentra ubicado el elemento. */

También podemos indicar de donde se empieza a contar los span pasandole como primer parámetro el número de la linea.

	.item-a {
		grid-column: 1 / span 2;
		grid-row: 3 / span 3;
	}

	.item-b {
		grid-column: 2 / span 2;
		grid-row:  1 / span 3;
	}

Veo muchos comentarios de gente que se perdió en esta clase y fue por un gran error del curso: hasta esta clase no se ha explicado qué es una celda, una línea y sus propiedades, contrario a lo que dice la profesora al inicio del video solo se mostró un dibujo en una diapositiva. Tal vez el argumento sea que con ese dibujo se da por entendido esos temas pero hacer eso en un curso introductorio es un gran error didáctico.

no me quedo claro para que sirve el grid-auto-flow

He leído muchos comentarios acerca de que este curso debería ser mucho más práctico en lugar de que veamos solo diapositivas.
Sin embargo, no puedo estar de acuerdo con esta idea.
Vengo de haber terminado el curso de maquetación con CSS Grid en el que el profesor De Granda explica muy bien de forma práctica. Sin embargo, como es un concepto nuevo se me hizo muy complicado adaptarme y aprenderlo. Así que me pasé todos los niveles del juego de CSS Grid que muchos han compartido, y así pude entender más. Luego, leí documentación en línea para reforzar, pero por supuesto, se me olvidan algunas cosas. Así que este curso es el complemento perfecto para mi aprendizaje. Yo mismo hago el código, y sus presentaciones me han servido de mucho.
Mi cuaderno de notas está repleto de información supervaliosa.

A todos les recomiendo que este tema de ccs grid busquen informacion en youtube, las explicaciones van mas al grano y son mas entendibles, ya si quieren pueden volver aca pero para reforzar

La respuesta es B y C

Notas de la clase

Como vimos anteriormente, un track es la union de dos o mas celdas.

Por mas que definamos cierto numero de elementos, no sabemos si por parte del backend, se nos agregarían mas y para poder solucionar esto, necesitamos no establecer la cantidad de filas desde el principio, dejamos que se creen solas. Esto se llama Grid Implícita donde se crean filas o columnas si las necesitamos con anchos sin tamaño.

Para poder acomodar los elementos en ciertas lineas, necesitamos el comando:

.item{
	grid-column:1/2; //QUIERE DECIR QUE EL ELEMENTO ESTARA DESDE LA LINEA 1 A LA 2 DE COLUMNAS
	grid-row:1/2; //QUIERE DECIR QUE ESTARA EN LA LINEA 1 A LA 2 DE FILAS
}

Existe una propiedad que nos permite crear columnas desde antes que llegue un elemento, aunque no lo hayamos definido desde el principio de una grid, este elemento nos permitirá crear columnas de un tamaño predefinido:

.container{
	grid-auto-columns:60px;
}

Tambien tenemos otra propiedad que nos ayuda a ir agregando mas elementos en cierto orden, si son columnas o filas, con la propiedad:

.container{
		grid-auto-flow:row | Column | row dense | column dense
}

CSS grid es definido usando el valor grid en la propiedad display; puedes definir columnas y filas en tu diseño grid, con las propiedades  grid-template-rows y grid-template-columns .
|
El grid que configures usando estas propiedades es definido como la grilla explícita (explicit grid).
|
Si colocas contenido fuera de esta cuadrícula explícita, o si confías en la ubicación automática y el algoritmo de cuadrícula necesita crear tracks de filas o columnas adicionales para contener grid items, luego se crearán pistas adicionales en la cuadrícula implícita. La cuadrícula implícita es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.

• La propiedad CSS grid-template-rows define el nombre de las líneas y las funciones de tamaño de línea de grid rows.

• La propiedad CSS grid-template-columns define el nombre de las líneas y las funciones de tamaño de línea de grid columns.

• La propiedad grid-auto-rows de CSS especifíca el tamaño de una nueva fila creada de forma implícita.

• La propiedad de css grid-auto-columns especifíca el tamaño de una columna de cuadrícula creada implícitamente track.

![](

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>``````

Que lástima que en esta clase tampoco se haya visto la práctica. La profe solo lee las diapositivas. ☹ …en el curso de CSS Grid Básico la otra profe si va mostrando como es el start y el end de las líneas para filas y columnas. Esto es clave! Deberían actualizar el curso porque quedan muchos vacíos.

si quieren repasar los conceptos de css grid pueden revisar learncssgrid

Con lo aprendido hasta ahora, mi humilde aporte🥺👉🏻👈🏻

📙 Ejercicio

.

.

💻Code

.

<div class='wrapper'>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
</div>

.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 100px;
  border: 5px green solid;
  padding: 15px 15px;
}

.wrapper > div {
  border: 5px papayawhip solid;
}

.
Codepen Example

Lo mas probable es que sería opcion B y C. voy a practicarlos.

Hasta el momento el curso no ha alcanzado mis espectativas. Voy por la clases 20 y sinceramente voy a culminar el curso por mera constancia. Reforzare conocimientos con otro curso de css grid.

Para las personas que les quedan dudas de como usar Grid, les recomiendo estos videos:

• https://youtu.be/9w3gy2dYN_E
• https://youtu.be/6qko7Nbe8YA
• https://youtu.be/QBOUSrMqlSQ
  Con esos videos les quedaran mas que claro de como usar Grid y la mayoría de sus poderes.

Este curso debió ser mas practico para que todo quede mas claro, pero veo que hay otro puede que en ese otro sea mas practico esperemos que así sea.

No se frustren y busquen mas información y practiquen mucho.

Solo comentar que preferiria mas el formato de clase donde el profesor hace el codigo y muestra como se van aplicando los cambios, es como ver a alguien trabajar, creo que asi se aprende mejor o quizas estoy un poco traumado por los profes que solo pasaban pdf

body {
    height: 100vh;
    display: grid;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px 150px;
}

div {
    border: 3px solid pink;
    background: lightcyan;
    display: grid;
}

.item1 {
    grid-column: 1/2;
    grid-row: 1/2;
}

.item2 {
    grid-column: 3/4;
    grid-row: 1/2;
}

.item3 {
    grid-column: 1/2;
    grid-row: 3/4;
}

.item4 {
    grid-column: 3/4;
    grid-row: 3/4;
}

Pesimo curso.

Con esta pagina me quedo mucho claro lo que se vio en esta y la clase pasada https://css-tricks.com/snippets/css/complete-guide-grid/

/* Agrega automaticamente columnas */
grid-auto-flow: column;

/* Agrega automaticamente filas */
grid-auto-flow: row;

/* Define el tamaño a las columnas que se agreguen automaticamente */
grid-auto-columns: 100px;

/* Define el tamaño a las filas que se agreguen automaticamente */
grid-auto-rows: 100px;

Mi respuesta es B y C

Algo fuera de lo normal en esta practica

HTML:

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
  </div>

CSS:

.container {
  padding:5px;
  width:70%;
  display:grid;
  background-color: #5f9;
  grid-auto-columns: 100px;
  grid-template-rows: 100px 100px;
  
}
.item1 {
  background-color: #13e;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  border-radius: 50%;
}
.item2 {
  background-color: #e55;
  grid-column: 5 / span 1;
  grid-row: 2 / 3;
  border-radius: 50%;
}
.item3 {
   background-color: #021;
   grid-column: 3 / 4;
   grid-row: 2 / 3;
   margin: 30px 0;
  border-radius: 85px;
}
.item4 {
  background-color: #fff;
  grid-column: 3 / span 1;
  grid-row: 1 / 3;
  margin:10px 75px 30px 0;
  border-radius: 85px;
}

Dejo un juego de CSS grid:
-https://cssgridgarden.com/#es

Aunque no se ve hay un scroll

La respuesta es

• B

• C

B y C

Y yaaaaa saben chicos, cuando diga “+ Quiz” significa que faltara una parte de la clase, ya le saben jeje

Ya saben como calificar este curso!! y a su p r o f e s o r a

¿B y C?

como tkm los grid-auto ❤️

B y C

Las respuestas serian B y C

Concuerdo con los compañeros que este curso esta muy enfocado en la teoria le falta práctica, me hubiese gustado clonar una pagina paso a paso usando solo grid o en su mayoria o aplicar todas las propiedades aprendidas, al menos los que venimos con el profe diego podemos notar esa diferencia, sin embargo ya estoy aqui asi que lo tomo como un refuerzo a los conocimientos que he venido desarrollando, siempre hay algo nuevo que aprender 😀, pero si deberia tener un poco mas de práctica en este curso. Critica constructiva para mejorar 💚

La respuesta correcta es: B y C

Respuesta al Quíz: B y C

Si este hubiera sido mi primera aproximación a CSS Grid creo que muy poco me serviría. Me ha sido útil pero a modo de repaso.

Al no mostrar o explicar qué es una línea, qué es un celda, etc. con código de un grid sencillo, en realidad es poco útil si es primera vez que conoces de CSS Grid.

En **Udemy ** hay un curso de CSS de Jordan Alexander, que explica muy bien CSS desde lo más básico pasando por Flex, Grid y demás. También comparte en su canal de YT @AlexCGDesign Te comparto el canal: https://www.youtube.com/@AlexCGDesign

hasta ahora no vengo entiendo mucho, me gustaría que la profe haga prácticas. Pq la verdad mucho teorico pero poca poca practica por parte del profesor.

La respuesta del Quiz es “B” y “C”

Differences between Explicit and Implicit Grids:

Una lastima pagar por esta explicación tan mala!
si alguien no entendió, les recomiendo este video!

https://www.youtube.com/watch?v=FQU2zeHzll0&list=PLhSj3UTs2_yWsFd43wpLog5HUFzDgIbWj&index=9

La verdad se me complico mucho comprender este tema con estas clases. Una lastima pagar para tener que recurrir a Youtube por un tema tan importante como CSS GRID!!!
Les recomiendo esta lista de Youtube, explican muuuy bien: https://www.youtube.com/playlist?list=PLhSj3UTs2_yWsFd43wpLog5HUFzDgIbWj
Saludos!!!

Reto cumplido! El intento está! no se si bien o mal, pero quedó.

Si le sirve a alguien, dejo lo que conseguí hacer y me ayudó a entender un poco más lo explicado.

<body>
<div class=“container”>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
<div class=“item”></div>
</div>
</body>
</html>

.container{
background-color: #0ff;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 5px;
grid-auto-rows: 200px;
grid-auto-flow: row;
}

.item{
border: 5px solid #f00;
}

.container{
background: papayawhip;
display: grid;
place-items: center;
width: 200px;
height: 200px;
}
.item{
background: hotpink;
width: 50px;
height: 50px;
border-radius: 50%;
}

La respuesta al Quiz es la B y C

grid-auto-columns
grid-auto-rows

Banda (grid track): Es la Banda horizontal o vertical de celdas de la cuadrícula.

Se que no estoy utilizando correctamente la automatización de los track pero quería experimentar un poco mas espero que este aporte les sirva.

HTML

<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </main>    
</body>
</html>

CSS

/*
    1. Posicionamiento
    2. Modelo de caja
    3. Tipografia
    4. Visuales
    5. Otros
*/

html{
    font-size: 62.2%;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-size: 1.5rem;
}
main{
    display: grid;
    width: 200px;
    height: 200px;
    grid-template-columns: 60px;
    grid-template-rows: 90px 90px;
    /* Respuesta del quiz - ¿Con que propiedad(es) de CSS Grid podemos darle tamaño a tracks implicitos? */
    grid-auto-columns: 60px;
    grid-auto-rows: 90px;
    /* grid-auto-flow: row | column | row dense | column dense; dense solo cambia el orden visual de sus elementos */
    grid-auto-flow: column;
    place-items: center;
    background-color: #dd9c95;
    border: 1px solid black;
}
main div{
    width: 25px;
    height: 25px;
    background-color: #8859a9;
}
.a{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.b{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.c{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}
.d{
    width: 25px;
    height: 50px;
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    background-color: #643a3a;
}

Aqui encontre este video para complementar, espero les sirva:
https://www.youtube.com/watch?v=yAO5hsNuGZA

las respuestas para el Quiz es con la B y C.

La respuesta de del quiz es la B y la C

Que tal campeon, buen dia… decidi hacer el reto, por mi cuenta a mi forma de acuerdo al visto hasta este video del curso… se dice que, esperar siempre queda desepcionado uno, hasta este punto del curso. asi que no voy a comentar nada negativo, no es lo mio… solo como recomendacion para la persona que imparte el curso, seria de buen gusto el aprendizaje de cada persona si explicaras por lo menos lo que pretendes decir en cada slide de tu presentacion, pero en codigo!!! en cualquier editor de codigo!, no te cuesta nada,

claro…

Pueden probar esto y analizarlo:

Columnas automáticas con:

 grid-auto-flow: column;

.
Definiendo el tamaño de cada item tanto en el column y row

grid-auto-columns: 50px;
grid-auto-rows: 50px;

.
Esto es para centrar cada item dentro la Grid:

align-items: center;
justify-items: center;

resultado:

.
.
.
Código completo:

<!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>Document</title>

    <style>
        .container {
            width: 500px;
            height: 300px;
            display: grid;
            place-content: center;
            border: 4px solid rgb(255, 72, 0);
            margin: auto;
        }

        .container-grid {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: 50px;
            grid-auto-rows: 50px;

            align-items: center;
            justify-items: center;
            border: 3px solid blue;

        }

        .container-grid div {
            border: 1px solid #27c501;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="container-grid">
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
            <div>👻</div>
        </div>
    </div>

</body>

</html>

Saludos.

Si organizamos nuestro grid para que sea implicito podemos aplicar nuestro grid-auto-flow para que vaya agregando los elementos de acuerdo al orden asignado anteriormente o se organicen segun contenido existente.

Cuando usamos dense o sparse podemos o rellenar todos los espacios o abrir mas espacio entre los elementos, respectivamente cada uno de estas propiedades aplica así.

Para entender grid-auto-flow, les recomiendo profundizar leyendo el articulo en este enlace:

grid-auto-flow: dense;

La respuesta al quiz propuesto vienen siendo B y C, ya que son las propiedades con las cuales modificamos los tracks.

Para poder entender Grid Implicito es necesario comprender grid explicito.

Grid explicito funciona o es visible cuando manualmente agregamos los items dentro de la grid.

Entendiendo esto, grid implicito es una automatización de este proceso.

b y c son las propiedades paradarle tamaño implícitos

Podemos asignar tamaños a tracks implicitos con las propiedades:
grid-auto-colums: / grid-auto-rows:

grid-auto-columns
grid-auto-rows

El valor por defecto de grid-auto-flow es:

grid-auto-flow: row ; 
#genera _filas_automáticamente

Según lo visto en este curso y en otros. Donde la profesora hizo las dos car que estaban en una sola columna, faltaría agregarle un gap al código que ella mostro para que se vea ese espacio que hay entre las 2 filas.

row-gap: 50px;
<code> 

body {
    width: 100%;
    height: auto;
}

.container {
    display: grid;
    grid-auto-columns: 120px;
    grid-auto-rows: 90px;
    background-color: aquamarine;
    gap: 5px;
    justify-content: center;
}

.item-a {
    background-color: brown;
}

.item-b {
    background-color: #4b2aa5;
}

.item-c {
    background-color: cadetblue;
}
.item-d {
    background-color: antiquewhite;
}

(url

)

<code> 
grid-template-columns: 400px;
grid-auto-flow: row;

sería más fácil aprender si hubiera ejercicios prácticos que se hicieran junto con el profesor, de esta forma tengo que buscar ayuda en youtube… btw vengo del curso pasado de diego y era muchísimo más fácil aprender como lo hacia el.

Quiz:
Las respuestas B o C son válidas

b y c

Me parece, pese a la poca practica en algunas clases, temas y propiedades muy bien explicadas, de manera clara y acompañadas de Quizs sencillos pero efectivos.

Si alguien siente la necesidad de practicar mas, etc. En platzi el lema es nunca parar de aprender, busquen /mos practicas en la web, videos en youtube, desarrollen el proyecto tomado en este curso, etc.

La respuesta es B yC

B y C, ya que gap, solo genera espaciados.

Las respuestas del quiz es la letra B y la letra C

El quiz es la B y C

se me ocurrio que asi funciona el posicionamiento de las fotos que se suben a instagram, por ejemplo las columnas son siempre 3 ( grid-template-columns: 1fr 1fr 1fr;), pero las filas no estan definidas y se usa el
( grid-auto-flow:row;
grid-auto-rows:1fr;) para que cada ultima foto se coloque automaticamente en el contenedor que esta ubicado en fila (1 a 2) columna (1 a 2).

.container {
  background: papayawhip;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: ;
  grid-auto-flow:row;
  grid-auto-rows:1fr;

Creo que esta es la mejor clase que he recibido en el curso. Genial.

Quiz: B y C

Respuesta B y C

quiz : B y C

Las respuestas a este quiz son: B y C .

MIS RESPUESTAS B Y C

B C