multiple columns inside a grid element
0
.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?
css css3 css-grid css-multicolumn-layout
edited Nov 24 '18 at 14:19
ksav
5,33421331
add a comment |
0
.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?
css css3 css-grid css-multicolumn-layout
edited Nov 24 '18 at 14:19
ksav
5,33421331
1
There are not "more than 4 columns insidegridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy
– Michael_B
Nov 24 '18 at 14:10
add a comment |
0
0
0
.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?
css css3 css-grid css-multicolumn-layout
edited Nov 24 '18 at 14:19
ksav
5,33421331
.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?
.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>.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>css css3 css-grid css-multicolumn-layout
css css3 css-grid css-multicolumn-layout
edited Nov 24 '18 at 14:19
ksav
5,33421331
edited Nov 24 '18 at 14:19
ksav
5,33421331
edited Nov 24 '18 at 14:19
ksav
5,33421331
edited Nov 24 '18 at 14:19
ksav
5,33421331
edited Nov 24 '18 at 14:19
ksav
5,33421331
5,33421331
asked Nov 24 '18 at 13:24
user7461846
1
There are not "more than 4 columns insidegridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy
– Michael_B
Nov 24 '18 at 14:10
add a comment |
1
There are not "more than 4 columns insidegridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy
– Michael_B
Nov 24 '18 at 14:10
1
1
There are not "more than 4 columns inside
gridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy– Michael_B
Nov 24 '18 at 14:10
There are not "more than 4 columns inside
gridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy– Michael_B
Nov 24 '18 at 14:10
add a comment |
2 Answers
2
active
oldest
votes
0
.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>answered Nov 24 '18 at 14:15
ksavksav
5,33421331
add a comment |
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
Dogukan CavusDogukan Cavus
3,0561426
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458594%2fmultiple-columns-inside-a-grid-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
.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>answered Nov 24 '18 at 14:15
ksavksav
5,33421331
add a comment |
0
.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>answered Nov 24 '18 at 14:15
ksavksav
5,33421331
add a comment |
0
0
0
.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>answered Nov 24 '18 at 14:15
ksavksav
5,33421331
.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>.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>.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>answered Nov 24 '18 at 14:15
ksavksav
5,33421331
edited Nov 24 '18 at 14:20
answered Nov 24 '18 at 14:15
ksavksav
5,33421331
answered Nov 24 '18 at 14:15
ksavksav
5,33421331
answered Nov 24 '18 at 14:15
ksavksav
5,33421331
5,33421331
add a comment |
add a comment |
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
Dogukan CavusDogukan Cavus
3,0561426
add a comment |
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
Dogukan CavusDogukan Cavus
3,0561426
add a comment |
0
0
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
Dogukan CavusDogukan Cavus
3,0561426
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
Dogukan CavusDogukan Cavus
3,0561426
answered Nov 24 '18 at 14:01
Dogukan CavusDogukan Cavus
3,0561426
answered Nov 24 '18 at 14:01
Dogukan CavusDogukan Cavus
3,0561426
answered Nov 24 '18 at 14:01
Dogukan CavusDogukan Cavus
3,0561426
3,0561426
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53458594%2fmultiple-columns-inside-a-grid-element%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
There are not "more than 4 columns inside
gridleft"? There are four columns, as you specified. jsfiddle.net/hsfr7zxy– Michael_B
Nov 24 '18 at 14:10