Блог

Надеюсь, кто-нибудь сможет объяснить, почему столбцы в сетке не начинаются с одной строки. Я установил, чтобы оба столбца начинались со строки 2, но контейнер списка адресов (в стороне) начинается ниже, а графические поля начинаются там, где они должны.

Это то, чего я хочу:

 —————   —————————————                          
Ul()     Img()  Img()
Li       <p>    <p>
Li       Img()  Img()
Li       <p>    <p>
 

Это произойдет:

 —————   —————————————                          
         Img()  Img()
         <p>    <p>
Ul()     Img()  Img()
Li       <p>    <p>
Li       
Li       
 

Помещаю свой HTML-код сюда:

 <div class="container">

    <div class="headline1">
        <h2>Filter</h2>
    </div>
    <div class="headline2">
        <h2>Prosjekter</h2>
    </div>

    <div class="aside_container">
        <div class="aside1">
            <h3>Vakker:</h3>
            <ul>
                <li>1 Helhetlig utforming</li>
                <li>2 Estetisk opplevelse</li>
            </ul>    
        </div>
        
        <div class="aside2">
            <h3>Prosjektype:</h3>
            <ul>
                <li>Byplan</li>
                <li>Parker og byrom </li>
                <li>Bolig</li>
                <li>Næring</li>
                .........
            </ul>

        </div>
    </div>

    <div class="main">
        <div class="picture_box">
            <img src=""/>
            <h3>Green House D36</h3>
            <div class="icons">
                <h4>1</h4>
                <h4>2</h4>
                <h4>3</h4>
                <h4>4</h4>
                <h4>5</h4>
                <h4>6</h4>
                <h4>7</h4>
                <h4>8</h4> 
            </div>
        </div>
    </div>
 

Помещаю свой код SCSS здесь:

 .container{
    margin-top: 5em;

    display: grid;
    grid-template-columns: repeat(4, [col] 150px ) ;
    grid-template-rows: repeat(2, [row] auto  );
    justify-content: space-evenly;


    img{
        max-width: 300px;
        height: auto;
    }

    .headline1{
        grid-row: row; 
        grid-column: col / span 1;
    }

    .headline2{
        grid-row: row;
        grid-column: col 3/ span 2;
    }

    .aside_container{
        grid-column: col / span 2;
        grid-row: row 2;
        display: grid;

        .aside1 {
            ul{
            } 
        }

        .aside2{
            ul{
            }
        }
    }

    .main{
        grid-column: col 3 / span 2;
        grid-row: row 2;

        display: grid;
        grid-gap: 0.5em;
        grid-template-columns: 1fr 1fr;
         
        .picture_box{
 
         }
    }
}
 

Ваш код, похоже, не соответствует вопросу, учитывая, что с этой скрипкой js https://jsfiddle.net/63oLenas/ все работает нормально.

Возможно, причиной проблемы является пустой элемент img здесь:

  <div class="picture_box">
        <img src=""/>
        <h3>Green House D36</h3>