Испытание: Набор стикеров 100%

Курсы Микросетки
1

Вот решение, если кто-то столкнулся с проблемами.

.stickers-list {
display : grid ;
grid-template-columns : repeat(auto-fit, minmax(100px, 1fr));
grid-auto-flow: dense;
margin : 0;
padding : 20px;
gap: 10px;
}

.sticker:nth-child(3n) {
grid-row: span 2;
grid-column: span 2;
}

3 лайка
2

Спасибо за ответ, получилось на 100%
Не знаю почему, но я пробовал свой код, получалось близко к образцу, но не хватало буквально пикселей.

Мой код:

.stickers-list {
margin: 10px;
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, min-max(100px, 1fr));
gap: 10px;
grid-auto-flow: dense;
}
.sticker:nth-child(3n) {
grid-row: span 2;
grid-column: span 2;
}

3

предпогалаю, что в моем коде было необходимо правила margin и padding перенести в конец кода.
Не понимаю как это повлияло на результат. Удивлен, что вообще как то повлияло.
Но по факту ваш код подошел на 100% а мой код выдавал результат 67% со смещениями пикселей.

4

видимо назначение правил имеет свою каскадность и вложенность.

5

У вас margin: 10px; из-за этого и сдвиг получался. В задании было сказано, обнулить все внешние отступы у списка.

6

.stickers-list {
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
padding: 20px;
gap: 10px;
grid-auto-flow: dense;
}

:nth-child(3n) {
grid-column: span 2;
grid-row: span 2;
}

7

.stickers-list{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
padding:20px;
margin:0;
gap:10px;
grid-auto-flow:dense;
}

.sticker:nth-child(3n){
grid-column:span 2;
grid-row:span 2;
}

8 
body {
  margin: 0; 
}

ul {
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-flow: dense;
  gap: 10px;

}

.stickers-list li:nth-child(3n) {
  grid-column: span 2;
  grid-row: span 2;
}