La solución de la utilización de widgth y heigth, en la forma que se presenta, no me funciona para realizar el ejercicio. Ya que no se divide en grupos de tres.
Por mi parte, llegué al resultado en el código adjunto. Los 180px, son calculados considerando que cada elemento es de 50px y los márgenes de 5px por lado.
'
<body>
<div class="grid">
<div class="course">1</div>
<div class="course">2</div>
<div class="course">3</div>
<div class="course">4</div>
<div class="course">5</div>
<div class="course">6</div>
<div class="course">7</div>
<div class="course">8</div>
<div class="course">9</div>
<div class="course">10</div>
<div class="course">11</div>
</div>
</body>
<style>
.course {
height: 50px;
width: 50px;
background-color: green;
margin: 5px;
align-items: baseline;
}
.grid{
display: flex;
width: 180px;
align-content: space-between;
flex-wrap: wrap;
text-align: center;
font-size: 10px;
}
</style>
'
