Почему появился отступ в грид сетке?

я разлиновала грид, вставила картинки, но почему то нижний вот таак вот выпадает. и еще смущает горизонтальная прокрутка.
вот код блока:
<div class="main">
           <div class="vertical__main">
             <img src="assets/img/blue.png" alt="">
           </div>

           <div class="top__main">
               <img src="assets/img/beuge.png" alt="">
           </div>

           <div class="bottom__main">
               <img src="assets/img/black.png" alt=""> 
           </div>
        </div>


.main {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;

        .vertical__main {
             grid-column-start: 1;
             grid-column-end: 2;
             grid-row-start: 1;
             grid-row-end: 3;
        }

        .top__main {
             grid-column-start: 2;
             grid-column-end: 3;
             grid-row-start: 1;
             grid-row-end: 2;    
        }

        .bottom__main {
             grid-column-start: 2;
             grid-column-end: 3;
             grid-row-start: 2;
             grid-row-end: 3;
        }
    }


5cdd430fe022e427343562.jpeg
  • Вопрос задан
  • 429 просмотров
Пригласить эксперта
Ответы на вопрос 2
@r_mustang
Отступы возникают из-за того, что картинки не полностью заполняют родительский блок. Это в свою очередь может быть из-за несовпадающих пропорций. В таких случаях картинку обычно ставят через background.
Ответ написан
@Androbim
Сетка на месте, верно. Но первое изображение на 4 px меньше ширины блока, отсюда "отступ".
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы