несколько столбцов внутри элемента сетки

Question

.grid {
  display: grid;
  grid-template-columns: 1fr 99px;
  background: silver;
  height: 100vh;
}

.gridleft {
  column-count: 4;
  background: lightblue;
  overflow-y: scroll;
}

.title {
  background: lightblue;
  height: 450px;
}

<div class='grid'>
  <div class='gridleft'>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
    <div class='title'>lorem</div>
  </div>
  <div class='gridright'>

  </div>
</div>

Почему внутри gridleft больше 4 столбцов?

Мне нужно классическое содержимое с несколькими столбцами, со столбцами одинаковой ширины и вертикального направления потока, но внутри элемента сетки.

Любая помощь?

Answer 1

.grid {
  display: grid;
  grid-template-columns: 1fr 99px;
}

.gridleft {
  column-count: 4;
  background: lightblue;
}

.gridright {
  background: silver;
}

<div class='grid'>
  <div class='gridleft'>
    <h6>Lorem title</h6>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum ligula varius risus porttitor, ac auctor arcu fermentum. Vestibulum id erat eros. Cras a sapien sit amet mauris cursus faucibus. Donec dignissim, nulla sit amet tempus tempus,
    lacus nisl venenatis enim, quis pellentesque lacus justo vel erat. Cras fringilla sem quam, id dictum nulla blandit id.
  </div>
  <div class='gridright'>
    Mauris sed orci vitae justo gravida congue nec eget velit. Aenean felis enim, sodales ut vulputate at, fringilla in nibh. Nullam malesuada velit lacus. Maecenas ornare mollis commodo. Morbi scelerisque euismod dui et aliquet.
  </div>
</div>

Answer 2

Вы можете использовать для .gridleft

.gridleft{
display:grid;
grid-template-columns:repeat(4, 1fr);
background:lightblue;
overflow-y:scroll;
}