multiple columns inside a grid element

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>

Why there is more than 4 columns inside gridleft?

I need the classic multiple columns content, with columns of equal width and vertical flow direction, but inside a grid element.

Any help?

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>