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

 grid-template-columns: repeat(3, 30%);

Почему это не сработало для взятия всей высоты ?:

grid-template-rows: repeat(3, 30%);

enter image description here

Это код: .box - это контейнер, а .card - это дочерние:

.box{
  /*
    margin: 20vh auto;
    text-align: center;
    width: 75%;
    max-width: 650px;
    height: 60vh;
*/
    display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-template-rows: repeat(3, 30%);
    grid-gap: 12px;
    justify-content: center;
}

.card{
    border: 2px solid gray;
    height: 100%;
    border-radius: 6px;
}
<div className="box">
            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />

            <Card />
            <Card />
            <Card />
        </div>
2
J. Cake 25 Окт 2019 в 20:04

2 ответа

Лучший ответ

Вы должны установить высоту контейнера с классом box и использовать fr как единицу вместо процентов. Вам нужна высота контейнера, чтобы ячейки сетки могли рассчитать свою высоту по ней. Если вы используете fr вместо процентов, пропуски сетки сначала вычитаются из ширины / высоты контейнера, а затем делятся оставшееся пространство в соответствии с настройками grid-template-columns и grid-template-row. Вот рабочий пример:

<div class="box">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>

  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
body {
  margin: 0;
}

.box {
    background-color: hotpink;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 12px;
}

.card{
    border: 10px solid gray; // even with 10px or more nothing exceeds the container boundaries any more
    //height: 100%; // you do not need this, since the height is being calculated as a fr of the container height
    //box-sizing: border-box; // if you decide to set a height nonetheless you have to change box-sizing so the borders are not taking up extra space
    background-color: skyblue;
    border-radius: 6px;
}
2
Artur Noetzel 27 Окт 2019 в 14:01

Попробуйте заменить 30% с 1fr

grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
0
Stefan 25 Окт 2019 в 17:08
58562840