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

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

20/28
Recursos

Aportes 75

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 */
}

Les recomiendo el siguiente juego es útil para practicar las propiedades de CSS Grid.

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

Like si solo vas a terminar el curso porque llegaste hasta las clase 20.

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 😄

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.

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.

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

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

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.

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

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.

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

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

📙 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

La respuesta es B y C

Notas de la clase

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

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/

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.

/* 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;

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

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

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
}

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

si quieren repasar los conceptos de css grid pueden revisar learncssgrid

el item b no va desde la col 1 / 2 y row 3 / 4?? en el video dice row 2 / 3

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

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…

Pesimo curso.

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> 

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 💚

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

La Respuesta es:
(Redoble De Tambores 🥁)
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.

Les dejo una página que explica estos temas de una manera extraordinaria y con ejemplos:
https://developer.mozilla.org/es/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout

La respuesta al cuizzz es la letra B y C 😄

La respuestas son la B y la C. Al asignar esas dos propiedades con su valor le estamos diciendo a la grid que cada vez que llegue nuevo contenido me acomode o ajuste ese nuevo contenido en el tamaño que asigne.

Claramente la B y la C

la respuesta seria las alternativas B y C.

yo creo 😁 B) border-block-start

La respuesta es: B y C

respuesta b y c

Supongo que sería la C, no?

👌