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内为什么有四列以上？

我需要经典的多列内容，这些列具有相等的宽度和垂直的流向，但在网格元素之内。

有帮助吗？

Answer 1

您可以使用.gridleft

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

Answer 2

.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>

网格元素内的多列

2 个答案: