CSS GRID - как заставить строки доходить до высоты контейнера?

Я только начал изучать CSS, и есть одна вещь, которую мне сложно понять с помощью CSS GRiD.

Представьте, что я хочу сделать весь макет сайта с помощью CSS GRID. Как указать сетке контейнера использовать всю высоту страницы? (как и для ширины).

Для части столбцов мы используем, например, «1fr» по крайней мере для одного столбца. Но что касается строковой части? Если поставить 1fr, элементы не доходят до низа страницы.

Идея была бы в том, что когда я расширяю свои окна (вертикально и горизонтально), все «растет» в соответствии с высотой контейнера и остротой. Таким образом, независимо от размера экрана, макет остается прежним, и изменяется только размер контейнера и элементов (div, шрифт, изображение ...).

Думаю, я чего-то не понимаю, но не могу найти решение.

Спасибо :)

<body>    
    <div class="grid-container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item11">11</div>
        <div class="item item12">12</div>
    </div>
</body>


html{
    font-size: 62.5%; 
    background: rgb(21,56,125);
    background: linear-gradient(90deg, rgba(21,56,125,1) 0%, rgba(91,47,87,1) 48%, rgba(133,16,16,1) 100%);
}


.grid-container{    
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat( 2, minmax(100px, 500px) );
    grid-template-rows:  repeat( 12, 1fr );
    border-style: black solid 20px;
}

.item{
    font-size: 4em;
    text-align: center;
    background-color: #E8DE42;
}

.item3{
    grid-column: span 2;
}

.item12{
    grid-column: span 2;
}

html css
person chriswh    schedule 10.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Суть проблемы в том, что вам нужно указать тегу BODY использовать высоту: 100% и ширину: 100%. После этого я сделал несколько настроек для ваших значений CSS GRID:

https://codepen.io/lokase/pen/MWKKXWv

html, body {
    font-size: 62.5%; 
    background: rgb(21,56,125);
    background: linear-gradient(90deg, rgba(21,56,125,1) 0%, rgba(91,47,87,1) 48%, rgba(133,16,16,1) 100%);

    width: 100%;
    height: 100%;
}


.grid-container{    
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat( 2 );
    grid-template-rows:  auto;
    border-style: black solid 20px;
    width: 100%;
    height: 100%;  
}

.item{
    font-size: 4em;
    text-align: center;
    background-color: #E8DE42;
}

.item3{
    grid-column: span 2;
}

.item12{
    grid-column: span 2;
}
person Lowkase    schedule 10.06.2020
comment
Здорово ! Я пробовал ширину и высоту, но не по корпусу! Спасибо за помощь :) - person chriswh; 10.06.2020