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

No se trata de lo que quieres comprar, sino de quién quieres ser. Aprovecha el precio especial.

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

14 Días
2 Hrs
1 Min
31 Seg

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

20/28
Recursos

Aportes 110

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

<h4>Ideas/conceptos claves</h4>

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

<h4>Apuntes</h4>
  • 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
}
<h4>Grid Implícita</h4>

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.

¡Éste curso ya se me hizo lentísimo!. Ya sólo quiero acabarlo porque no me gusta no terminar los cursos, pero siento que sin prácticas guiadas no me ayuda mucho.

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

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

el item b no va desde la col 1 / 2 y row 3 / 4?? en el video dice row 2 / 3
Uso de `span` para Tracks. **Propósito**: El `span` se usa para hacer que un elemento abarque varias columnas o filas en la grilla. **Por qué usarlo**: Si deseas que un elemento ocupe más de una celda en la grilla, el `span` te permite especificar cuántas celdas adicionales debe abarcar.
Propiedad `grid-auto-flow`: .container { grid-auto-flow: row | column | row dense | column dense; } **Propósito**: Controla cómo los elementos se posicionan automáticamente en la grilla cuando no se especifica su posición exacta. **Valores posibles**: `row`: Los elementos se colocan en filas. Si una fila se llena, se moverán a la siguiente. `column`: Los elementos se colocan en columnas. Si una columna se llena, se moverán a la siguiente. `row dense`: Los elementos se colocan en filas, pero de manera densa, es decir, ocupando cualquier espacio disponible. `column dense`: Los elementos se colocan en columnas, de manera densa, ocupando espacios disponibles. *
1. **Track**: En CSS Grid, un "track" es la unión de dos o más celdas dentro de una grilla. Las celdas pueden ser filas (horizontales) o columnas (verticales). En otras palabras, un track es como una franja de la grilla, que puede abarcar más de una celda. ### **Apuntes** 1. **Grillas con Items Dinámicos** 2. No siempre sabrás exactamente cuántos elementos tendrá una grilla porque los datos que se muestran pueden cambiar dinámicamente. Por ejemplo, si estás mostrando productos en una tienda online, el número de productos puede variar. 3. **Grid Implícita** 4. Cuando no especificas cuántas filas o columnas tiene una grilla, CSS puede crearlas automáticamente según sea necesario. Esto es lo que se llama una "grid implícita". 5. Las filas o columnas que se generan automáticamente por la grid implícita no tienen un tamaño predefinido, pero puedes controlarlo con propiedades específicas. 6. Propiedad `grid-auto-columns`: .container { grid-auto-columns: 60px; } 7. **Propósito**: Define el ancho de las columnas que se generan automáticamente en una grid implícita. 8. **Por qué usarla**: Imagina que tienes un contenedor (`.container`) en el que no sabes cuántas columnas vas a necesitar. Cuando se agregan más elementos que exceden las columnas definidas, CSS creará automáticamente nuevas columnas. La propiedad `grid-auto-columns` establece que cada una de estas nuevas columnas tendrá un ancho de `60px`.
la repuesta es opcion b y c
asi lo entendi![](https://static.platzi.com/media/user_upload/clase20-404a344f-c761-46f3-9e2c-632448c35f06.jpg)
asi lo entendi ![](https://static.platzi.com/media/user_upload/clase20-1-0b39845c-53fb-4038-b866-246f2e5c5c51.jpg)

Aunque no se ve hay un scroll



La respuesta al Quiz es B y C exactamente, pero hay que programar con mucho cuidado porque un solo error el programa no corre

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

las respuestas sería B y C.