Не понимаю в чем ошибка и почему происходит такое поведение? Почему-то при использование grid, все ломается из-за второго элемента
Получается так, что из второго элемента цвет заднего фона, как будто вытекает (это видно на картинке). Возможно я слабо ориентируюсь в технологии, но все же интересует, как решить такую проблему. Ниже вставлю код блока.
.records {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 150px;
:nth-child(1) {
background-color: #80d8ff;
}
:nth-child(2) {
background-color: #82b1ff;
}
:nth-child(3) {
background-color: #b388ff;
}
:nth-child(4) {
background-color: #ea80fc;
}
}<div class="records__item">
<div class="records__circle"></div>
<div class="records__spec">
12000+
<br>
Business
</div>
</div>
<div class="records__item">
<div class="records__circle"></div>
<div class="records__spec">
60000+
<br>
Downloads
</div>
</div>
<div class="records__item">
<div class="records__circle"></div>
<div class="records__spec">
30000+
<br>
Free Installs
</div>
</div>
<div class="records__item">
<div class="records__circle"></div>
<div class="records__spec">
40000+
<br>
Pro Users
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Shift
→ Ссылка
Проблема в том, что у Вас не фон "вытекает", а в том, что у вас цвет верха сетки и фон этого элемента одинаковы - везде #82b1ff
Вы можете изменить цвет одного из двух - и все будет так, как Вы задумали.