Bootstrap or CSS Grid? - 3 columns of equal height but content overflowing [closed]
up vote
-6
down vote
favorite
My aim is to create a container which has three columns with the content inside. I'm not sure how to do so with bootstrap, or whether CSS Grid is the correct way of doing so.
I don't want to create three columns but have one column/section divide into 3 by their total height similar to the picture below, so that the sections will overflow from one column to another.
The columns would be in the order : 1,2,3 from left to right horizontally and : 1,2,3 from top to bottom vertically.
html css bootstrap-4
edited Nov 10 at 23:38
ksav
3,65121227
asked Nov 10 at 23:00
aidan22
147
closed as primarily opinion-based by jhpratt, j08691, Daedalus, cale_b, TylerH Nov 11 at 0:44
Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.
add a comment |
up vote
-6
down vote
favorite
My aim is to create a container which has three columns with the content inside. I'm not sure how to do so with bootstrap, or whether CSS Grid is the correct way of doing so.
I don't want to create three columns but have one column/section divide into 3 by their total height similar to the picture below, so that the sections will overflow from one column to another.
The columns would be in the order : 1,2,3 from left to right horizontally and : 1,2,3 from top to bottom vertically.
html css bootstrap-4
edited Nov 10 at 23:38
ksav
3,65121227
asked Nov 10 at 23:00
aidan22
147
closed as primarily opinion-based by jhpratt, j08691, Daedalus, cale_b, TylerH Nov 11 at 0:44
Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35
add a comment |
up vote
-6
down vote
favorite
up vote
-6
down vote
favorite
My aim is to create a container which has three columns with the content inside. I'm not sure how to do so with bootstrap, or whether CSS Grid is the correct way of doing so.
I don't want to create three columns but have one column/section divide into 3 by their total height similar to the picture below, so that the sections will overflow from one column to another.
The columns would be in the order : 1,2,3 from left to right horizontally and : 1,2,3 from top to bottom vertically.
html css bootstrap-4
edited Nov 10 at 23:38
ksav
3,65121227
asked Nov 10 at 23:00
aidan22
147
My aim is to create a container which has three columns with the content inside. I'm not sure how to do so with bootstrap, or whether CSS Grid is the correct way of doing so.
I don't want to create three columns but have one column/section divide into 3 by their total height similar to the picture below, so that the sections will overflow from one column to another.
The columns would be in the order : 1,2,3 from left to right horizontally and : 1,2,3 from top to bottom vertically.
html css bootstrap-4
html css bootstrap-4
edited Nov 10 at 23:38
ksav
3,65121227
asked Nov 10 at 23:00
aidan22
147
edited Nov 10 at 23:38
ksav
3,65121227
asked Nov 10 at 23:00
aidan22
147
edited Nov 10 at 23:38
ksav
3,65121227
edited Nov 10 at 23:38
ksav
3,65121227
edited Nov 10 at 23:38
ksav
3,65121227
3,65121227
asked Nov 10 at 23:00
aidan22
147
asked Nov 10 at 23:00
aidan22
147
asked Nov 10 at 23:00
aidan22
147
147
closed as primarily opinion-based by jhpratt, j08691, Daedalus, cale_b, TylerH Nov 11 at 0:44
Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.
closed as primarily opinion-based by jhpratt, j08691, Daedalus, cale_b, TylerH Nov 11 at 0:44
Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35
add a comment |
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
Without resorting to JS, what you are describing must be done with CSS columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>You could only achieve something like the following with CSS Grid:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Content would not flow across a grid columns.
answered Nov 10 at 23:11
ksav
3,65121227
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting atcolumns: 1then changing it tocolumns: 3at the desired breakpoint.
– ksav
Nov 11 at 20:35
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
Without resorting to JS, what you are describing must be done with CSS columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>You could only achieve something like the following with CSS Grid:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Content would not flow across a grid columns.
answered Nov 10 at 23:11
ksav
3,65121227
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting atcolumns: 1then changing it tocolumns: 3at the desired breakpoint.
– ksav
Nov 11 at 20:35
add a comment |
up vote
0
down vote
accepted
Without resorting to JS, what you are describing must be done with CSS columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>You could only achieve something like the following with CSS Grid:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Content would not flow across a grid columns.
answered Nov 10 at 23:11
ksav
3,65121227
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting atcolumns: 1then changing it tocolumns: 3at the desired breakpoint.
– ksav
Nov 11 at 20:35
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
Without resorting to JS, what you are describing must be done with CSS columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>You could only achieve something like the following with CSS Grid:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Content would not flow across a grid columns.
answered Nov 10 at 23:11
ksav
3,65121227
Without resorting to JS, what you are describing must be done with CSS columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>You could only achieve something like the following with CSS Grid:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>Content would not flow across a grid columns.
.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>.columns {
columns: 3 auto;
padding: 10px;
}
.columns,
.item {
border: 1px solid black;
}
.item {
margin-bottom: 10px;
}
.item1 {
background-color: #B8B4AD;
}
.item2 {
background-color: #D9DFE5;
}
.item3 {
background-color: #FFB83E;
}
.item4 {
background-color: #E86807;
}<div class="columns">
<div class="item item1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu est et nunc placerat tempus. Quisque mollis orci et purus mollis scelerisque. Nunc non facilisis enim. Mauris tincidunt dui sed tristique tempor. Phasellus consectetur lorem ut felis maximus efficitur. Donec tortor sem, aliquam a libero at, rutrum auctor ligula. Cras id viverra turpis. Aenean malesuada, metus id fringilla vehicula, sem nibh ullamcorper sapien, sit amet sollicitudin massa nisi id mauris. Fusce aliquet pretium dui, a mollis est vehicula id. Phasellus pulvinar suscipit ex, non venenatis magna laoreet rutrum. Curabitur sollicitudin, leo et gravida dapibus, ex ante luctus nunc, a posuere ligula augue ac arcu. Proin a magna at neque blandit feugiat eget a massa. Donec id euismod enim, quis iaculis diam. Integer pellentesque facilisis magna, et ultricies turpis. Ut aliquet eros quis risus blandit posuere. Quisque tincidunt orci vel ipsum rhoncus eleifend. Curabitur vel est eu elit bibendum tincidunt. </div>
<div class="item item2">Nulla posuere, mi et ultrices volutpat, arcu mi feugiat velit, et semper urna justo sit amet est. Aenean ac felis eu ligula ultrices ullamcorper eu ut quam. Cras dignissim condimentum ante, nec convallis tortor. Vestibulum ante est, convallis quis dui id, convallis viverra felis.</div>
<div class="item item3">Donec ut justo sapien. Curabitur iaculis dolor et felis congue, ac ornare nunc dignissim. Duis egestas erat at sem molestie gravida. Quisque hendrerit erat vel magna condimentum mollis. Vestibulum faucibus iaculis enim eget commodo. Donec cursus dolor sed tincidunt semper. Pellentesque pellentesque lobortis ante a elementum. Nunc tellus libero, egestas et dui eu, consectetur consequat enim. Etiam malesuada sagittis eros eu consectetur. Aenean faucibus, massa quis pulvinar vulputate, nisi ex mollis lorem, id fringilla eros elit non est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ornare, libero vel consectetur venenatis, enim leo pretium purus, ut commodo nibh sapien eu neque.</div>
<div class="item item4">Vestibulum mi ligula, auctor at suscipit sed, dapibus in purus. Sed ut semper ligula. Integer tincidunt nisl id turpis eleifend sagittis. Phasellus pretium, justo sed finibus eleifend, eros nulla interdum libero, quis feugiat tortor est eu erat. Ut volutpat, ligula a dapibus dignissim, sapien diam molestie arcu, quis vulputate enim lorem lobortis nisl. </div>
</div>.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
height: 100vh;
padding: 10px;
}
.grid,
.item {
border: 2px solid black;
}
.item1 {
grid-row: 1 /3;
grid-column: 1;
}
.item2 {
grid-row: 3/9;
grid-column: 1;
}
.item3 {
grid-row: 1/5;
grid-column: 2;
}
.item4 {
grid-row: 5/9;
grid-column: 2;
}
.item5 {
grid-row: 1/4;
grid-column: 3;
}
.item6 {
grid-row: 4/9;
grid-column: 3;
}<div class="grid">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
<div class="item item6">6</div>
</div>answered Nov 10 at 23:11
ksav
3,65121227
edited Nov 10 at 23:46
answered Nov 10 at 23:11
ksav
3,65121227
answered Nov 10 at 23:11
ksav
3,65121227
answered Nov 10 at 23:11
ksav
3,65121227
3,65121227
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting atcolumns: 1then changing it tocolumns: 3at the desired breakpoint.
– ksav
Nov 11 at 20:35
add a comment |
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting atcolumns: 1then changing it tocolumns: 3at the desired breakpoint.
– ksav
Nov 11 at 20:35
1
1
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
"Must be done" with CSS columns - is strong language, and I disagree.... I believe that you could also do this with grid - better would be to say could be done with columns.
– cale_b
Nov 10 at 23:33
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
how would I achieve this with grid? and thank you for that answer, is this also responsive e.g. on a small screen I would like it to shrink to one column and be in order downwards (1...n)?
– aidan22
Nov 11 at 18:37
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting at
columns: 1 then changing it to columns: 3 at the desired breakpoint.– ksav
Nov 11 at 20:35
Check the 2nd snippet for an approach using grid. The columns approach can easily be made responsive by starting at
columns: 1 then changing it to columns: 3 at the desired breakpoint.– ksav
Nov 11 at 20:35
add a comment |
So, first of all, will this be responsive? Also, will the order of these elements change depending on the screen size? Or it would be something like 1, 2, 2 continued, 3, 3 continued, 4 ?
– Mihail Minkov
Nov 10 at 23:03
yes, responsive and will reorder on a small screen to one column with the order of 1 onwards from top to bottom
– aidan22
Nov 11 at 18:35