EJERCICIO | Flexbox: Posicione elementos en la pantalla | Alura Latam

<div class="grid">
  <!-- primera línea -->
  <div class="course"></div>
  <div class="course"></div>
  <div class="course"></div>
  <!-- segunda línea -->
  <div class="course"></div>
  <div class="course"></div>
  <div class="course"></div>
  <!-- tercera línea -->
  <div class="course"></div>
  <div class="course"></div>
  <div class="course"></div>
  <!-- cuarta línea -->
  <div class="course"></div>
  <div class="course"></div>
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
}
.course {
  width: 31.3%;
  margin: 1%;
}

No entiendo la siguiente explicación: En este caso tendríamos 3 .course por línea, cada uno con width: 31.3% y margin: 1%.

De width eso totaliza: 31.3 * 3 = 93.9%.

De margin eso totaliza: 6% (1% a la izquierda y 1% a la derecha de cada elemento).

En el total tenemos: 93.9% + 6% = 99.9% que se puede redondear al 100%.

¡Hola Esteban!

La explicación que no entiendes se refiere a cómo se calcula el ancho total de los elementos y los márgenes en la cuadrícula que has creado.

En este caso, tienes 3 elementos por línea, cada uno con un ancho del 31.3% y un margen del 1% a la izquierda y a la derecha.

Para calcular el ancho total de los elementos, se multiplica el ancho individual por el número de elementos en una línea: 31.3% * 3 = 93.9%.

Para calcular el margen total, se suma el margen de cada elemento y se multiplica por el número de elementos en una línea: 1% * 2 (izquierda y derecha) * 3 = 6%.

En total, el ancho y el margen suman 99.9%, que se puede redondear al 100%.

Espero que esto haya aclarado tu duda. Si necesitas más ayuda, no dudes en preguntar. ¡Espero haber ayudado y buenos estudios!