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?

There are not "more than 4 columns inside `gridleft`"? There are four columns, as you specified. https://jsfiddle.net/hsfr7zxy/ — Michael Benjamin, Nov 24 '18 at 14:10

score 0 · Answer 1 · answered Nov 24 '18 at 14:01

0

You can using for .gridleft

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

answered Nov 24 '18 at 14:01

doğukan

23,073
13
57
69

ksav · Accepted Answer · 2018-11-24T14:20:12.273

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

multiple columns inside a grid element

2 Answers2