CSS-Grid begin with next column - css

Question

I have a 3 column css grid with content. I try to make it like that:
If content is too much, it should go to next column.
But I couldn't make it work. Do you have any hints?
.details {
background: #000;
color: #fff;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 100%);
grid-column-gap: 2px;
grid-row-gap: 2px;
.detail {
text-align: left;
padding: 10px;
}
}

Answer 1

You may use column CSS and floating pseudo elements to push content at the most towards the first columns :
possible examples to run and test in fullpage :
3 columns from column-count
body {
margin: 0;
}
div {
column-count: 3;
}
div p::before {
content: '';
padding-bottom: 90vh;
float: left;
}
/* extra styling */
div {
column-rule: double gray;
margin: 1em;
border: solid;
box-sizing: border-box;
background: rgb(243, 241, 121);
}
div h1,
p {
width: 80%;
margin: 1em auto;
text-indent: 1em;
text-align: justify;
}
<div>
<h1>Column CSS</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
or setting column-width instead column-count for a responsive behavior:
body {
margin: 0;
}
div {
column-width: 18em;
}
div p::before {
content: '';
padding-bottom: 90vh;
float: left;
}
/* extra styling */
div {
column-rule: double gray;
margin: 1em;
border: solid;
box-sizing: border-box;
background: rgb(243, 241, 121);
}
div h1,
p {
width: 80%;
margin: 1em auto;
text-indent: 1em;
text-align: justify;
}
<div>
<h1>Column CSS</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
probably not as perfect as you imagine : codepen demo to play with