CSS пустая ячейка - PullRequest
Новая
       6

CSS пустая ячейка

0 голосов
/ 11 ноября 2018

enter image description here

Я пытаюсь понять природу сетки CSS, я немного новичок в этом. Я хочу, чтобы элементы сетки были отзывчивыми и сохраняли пропорции изображений. Кажется, что на дне изображений есть странный разрыв.

Я смотрю на другие вопросы , которые могут быть похожими, но я все еще не уверен.

вот что у меня есть

https://codepen.io/eliowl/pen/EOgNQe

HTML 

<section id="about" class="about">
    <h3 class="text-center">About</h3>
    <section class="grid">
        <div class="grid-item --width3 ">
            <img src="https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=0c64fc542895cda41529f98ed3808572&auto=format&fit=crop&w=634&q=80" alt="">
        </div>

        <div class="grid-item --width ">
            <img src="https://images.unsplash.com/photo-1541773477186-4133e93eb70e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da73715faa685433b42f4decb9f71a60&auto=format&fit=crop&w=634&q=80" alt="">
        </div>

        <div class="grid-item --width2 ">
            <img src="https://images.unsplash.com/photo-1541787975442-d5085a8ec678?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f6fc603cb3c4886ec55a1bff07ee7b53&auto=format&fit=crop&w=375&q=80" alt="">
        </div>

        <div class="grid-item   ">
            <img src="https://images.unsplash.com/photo-1541780050666-f64773a3d779?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9ce82bea4ecf5b343e5317a683fd8226&auto=format&fit=crop&w=634&q=80" alt="">
        </div>  


        <div class="grid-item  ">
            <img src="https://images.unsplash.com/photo-1541766029309-8d7fa5bb773b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f3d1bf633d2a601dd04a716acfce40be&auto=format&fit=crop&w=500&q=60" alt="">
        </div>              

    </section>
</section>

* 1023 СКС *

.grid{
    display: grid;
    background-color: #fafafa;
    max-width: 1300px;
    clear: both;
    margin: 0 auto;
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-auto-flow: dense;

    grid-auto-rows: 100%;
}

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    display: flex;
    position: relative;
    overflow: hidden;
align-items:flex-start;
    grid-column: auto / span 2;
    grid-row: auto / span 4;



     img {
        width: 100%;
    }

}

.--width{
      grid-row: 2;
}


.--width2{
     grid-row: auto / span 4;
}
...