css - 网格元素内的多列

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>