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

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

Що не так? Хто знає . Потрібна допомога.

Screenshot_3
Screenshot_31159×604 174 KB

2

Попробуйте использовать для отступов не margin, а gap.

3

Удали правило .sticker
И добавь в .stickers-list {
gap : 10px;
}

4

Дякую!

5

100%

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

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

1 лайк
6

image
image1280×728 141 KB

а как быть, если браузер вот так отображает , когда правильно.
а я мучилась, через боди, задавая ширину…

2 лайка
7

body( width: 380px;}
вот так работает

8

body {
width: 380px;
}
.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;
}

9

.stickers-list{
width:338px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, minmax(100px, 200px));
grid-auto-flow: dense;
padding:20px;
margin-top:0px
}
.sticker:nth-child(3n){
grid-row: span 2;
grid-column: span 2
}

10

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

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

}

11

Opera Снимок_2022-02-05_175055_htmlacademy.ru
Opera Снимок_2022-02-05_175055_htmlacademy.ru1593×802 218 KB

Почему контент не выравнивается в 3 ряда, хотя показывает, что все правильно?

13

Уменьшите окно браузера встроенного, тогда выровняется.

image
image1591×1001 186 KB

1 лайк
14

100% на 09/11/2022.
Долго мучился, зачем-то пытался добавить правило для “sticker”. Оно не нужно.

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

body {
margin: 0;
}

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

.sticker {
margin: 5px;
}

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

А я вот так выполнил:) Правда намудрил немного, но всё-таки выполнил на 100%:slight_smile: