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

Question

[Мария Иванникова]

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

<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;
        }
    }

Comments

[Dima Polos]

Особо не вникал, честно, попробуйте для картинок написать max-width 100% height auto

[Androbim]

Это точно не часть изображения?
В Firefox, в консоли, можно посмотреть сетку grid. Не пробовали?

[Мария Иванникова]

Androbim, пробовала, сетка на месте

[Мария Иванникова]

Dima Polos, Dima Polos, нет, это мне не помогает

[Androbim]

toradorra, страницу не пришлете?

[Николай Шабалин]

скорее всего это из-за того, что тег `img` inline-block по умолчанию, попробуйте для `img { display: block }`

Answer 1

[r_mustang]

Отступы возникают из-за того, что картинки не полностью заполняют родительский блок. Это в свою очередь может быть из-за несовпадающих пропорций. В таких случаях картинку обычно ставят через background.

Comments

[Androbim]

Лучше не бэкграундом. Лучше через overflow родительского блока, чтобы пропорции не "поехали"

[r_mustang]

Если это не переиспользуемые блоки, то лучше бекграундом.

[Сергей delphinpro]

Androbim, чтобы пропорции "не поехали", используется не overflow, а cover/contain для object-fit или background-size.

Answer 2

[Androbim]

Сетка на месте, верно. Но первое изображение на 4 px меньше ширины блока, отсюда "отступ".