Two columns grid with flat mixed list of items
up vote
2
down vote
favorite
I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right.
So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to "start from top".
If i add all of them grid-row-start: 1, they all just collapses above each other at the top.
I don't want to change structure of the container as i'd like to just shuffle the classes to move items. In theory i can add class like row-1, row-2 etc in JavaScript and use it to determine where the cell should start but I wonder if there is an cleaner way to approach this purely in css.
Demo: https://jsfiddle.net/mbynw4cL/1/
javascript html css css-grid
asked Nov 9 at 14:06
Adam Szmyd
7741026
add a comment |
up vote
2
down vote
favorite
I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right.
So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to "start from top".
If i add all of them grid-row-start: 1, they all just collapses above each other at the top.
I don't want to change structure of the container as i'd like to just shuffle the classes to move items. In theory i can add class like row-1, row-2 etc in JavaScript and use it to determine where the cell should start but I wonder if there is an cleaner way to approach this purely in css.
Demo: https://jsfiddle.net/mbynw4cL/1/
javascript html css css-grid
asked Nov 9 at 14:06
Adam Szmyd
7741026
Can you please add your code here?
– ksav
Nov 9 at 14:43
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right.
So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to "start from top".
If i add all of them grid-row-start: 1, they all just collapses above each other at the top.
I don't want to change structure of the container as i'd like to just shuffle the classes to move items. In theory i can add class like row-1, row-2 etc in JavaScript and use it to determine where the cell should start but I wonder if there is an cleaner way to approach this purely in css.
Demo: https://jsfiddle.net/mbynw4cL/1/
javascript html css css-grid
asked Nov 9 at 14:06
Adam Szmyd
7741026
I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right.
So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to "start from top".
If i add all of them grid-row-start: 1, they all just collapses above each other at the top.
I don't want to change structure of the container as i'd like to just shuffle the classes to move items. In theory i can add class like row-1, row-2 etc in JavaScript and use it to determine where the cell should start but I wonder if there is an cleaner way to approach this purely in css.
Demo: https://jsfiddle.net/mbynw4cL/1/
javascript html css css-grid
javascript html css css-grid
asked Nov 9 at 14:06
Adam Szmyd
7741026
asked Nov 9 at 14:06
Adam Szmyd
7741026
asked Nov 9 at 14:06
Adam Szmyd
7741026
asked Nov 9 at 14:06
Adam Szmyd
7741026
asked Nov 9 at 14:06
Adam Szmyd
7741026
7741026
Can you please add your code here?
– ksav
Nov 9 at 14:43
add a comment |
Can you please add your code here?
– ksav
Nov 9 at 14:43
Can you please add your code here?
– ksav
Nov 9 at 14:43
Can you please add your code here?
– ksav
Nov 9 at 14:43
add a comment |
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
So what you want is to use the grid-auto-flow property:
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>This will "fill in" the gaps.
See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.
answered Nov 9 at 14:36
Raad
3,00111534
Thank you so much!
– Adam Szmyd
yesterday
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
So what you want is to use the grid-auto-flow property:
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>This will "fill in" the gaps.
See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.
answered Nov 9 at 14:36
Raad
3,00111534
Thank you so much!
– Adam Szmyd
yesterday
add a comment |
up vote
3
down vote
accepted
So what you want is to use the grid-auto-flow property:
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>This will "fill in" the gaps.
See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.
answered Nov 9 at 14:36
Raad
3,00111534
Thank you so much!
– Adam Szmyd
yesterday
add a comment |
up vote
3
down vote
accepted
up vote
3
down vote
accepted
So what you want is to use the grid-auto-flow property:
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>This will "fill in" the gaps.
See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.
answered Nov 9 at 14:36
Raad
3,00111534
So what you want is to use the grid-auto-flow property:
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>This will "fill in" the gaps.
See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.
.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>.grid
width: 200px;
border: 1px solid green;
display: grid;
grid-template-columns: auto auto;
grid-auto-flow: dense;
.item
width: 30px;
height: 30px;
margin: 5px;
.item.left
grid-column-start: 1;
justify-self: start;
background: red;
.item.right
grid-column-start: 2;
justify-self: end;
background: blue;
<div class="grid">
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item left"></div>
</div>answered Nov 9 at 14:36
Raad
3,00111534
answered Nov 9 at 14:36
Raad
3,00111534
answered Nov 9 at 14:36
Raad
3,00111534
answered Nov 9 at 14:36
Raad
3,00111534
3,00111534
Thank you so much!
– Adam Szmyd
yesterday
add a comment |
Thank you so much!
– Adam Szmyd
yesterday
Thank you so much!
– Adam Szmyd
yesterday
Thank you so much!
– Adam Szmyd
yesterday
add a comment |
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
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53227239%2ftwo-columns-grid-with-flat-mixed-list-of-items%23new-answer', 'question_page');
);
Post as a guest
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
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
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
Can you please add your code here?
– ksav
Nov 9 at 14:43