Display list of elements as table with CSS only?
3
Display list as a table with 3 columns, with the items evenly spread, and having 10px margin from every sides and between rows.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Should be rendered as
It is possible to achieve that with flex layout, but it would require more complicated HTML, see example below.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>I wonder if it would be possible to do with pure CSS, without adding any additional HTML elements. The size of .items shouldn't be changed, and it's unknown.
css css3 flexbox
edited Jan 20 at 16:28
Temani Afif
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
add a comment |
3
Display list as a table with 3 columns, with the items evenly spread, and having 10px margin from every sides and between rows.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Should be rendered as
It is possible to achieve that with flex layout, but it would require more complicated HTML, see example below.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>I wonder if it would be possible to do with pure CSS, without adding any additional HTML elements. The size of .items shouldn't be changed, and it's unknown.
css css3 flexbox
edited Jan 20 at 16:28
Temani Afif
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
1
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41
add a comment |
3
3
3
0
Display list as a table with 3 columns, with the items evenly spread, and having 10px margin from every sides and between rows.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Should be rendered as
It is possible to achieve that with flex layout, but it would require more complicated HTML, see example below.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>I wonder if it would be possible to do with pure CSS, without adding any additional HTML elements. The size of .items shouldn't be changed, and it's unknown.
css css3 flexbox
edited Jan 20 at 16:28
Temani Afif
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
Display list as a table with 3 columns, with the items evenly spread, and having 10px margin from every sides and between rows.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; }
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Should be rendered as
It is possible to achieve that with flex layout, but it would require more complicated HTML, see example below.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>I wonder if it would be possible to do with pure CSS, without adding any additional HTML elements. The size of .items shouldn't be changed, and it's unknown.
.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>.item { width: 10px; height: 10px; background: black; }
.grid { background: #eee; padding: 10px 10px 0 10px; }
.row { display: flex; justify-content: space-between; padding: 0 0 10px 0; }<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>css css3 flexbox
css css3 flexbox
edited Jan 20 at 16:28
Temani Afif
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
edited Jan 20 at 16:28
Temani Afif
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
edited Jan 20 at 16:28
Temani Afif
72.3k94080
edited Jan 20 at 16:28
Temani Afif
72.3k94080
edited Jan 20 at 16:28
Temani Afif
72.3k94080
72.3k94080
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
asked Jan 20 at 14:54
Alexey PetrushinAlexey Petrushin
2,83422547
2,83422547
1
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41
add a comment |
1
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41
1
1
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41
add a comment |
2 Answers
2
active
oldest
votes
3
You can do this with flexbox by adding a hidden element between the first and last row that will be width:100% thus you will avoid changing the html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>If the number of element is unknown you can consider CSS grid:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
Technically, rather than adding an element, OP could (theoretically) userow-gapin the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition ofrow-gapin that spec).
– David Thomas
Jan 20 at 16:39
Theafterelement not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line.row-gapwould not push the last 3 boxes on a new row and hence would have no effect at all.
– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
add a comment |
2
Temani Afif has written a good answer. The flexbox one will work only for 2 to 3 rows but the grid version will work for more items.
The grid CSS can be simplified further by using space-between, thus getting rid of margins and n-th child selectors.
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
Thank you, but as far as I understand, with this line -grid-template-columns: repeat(3,10px)you explicitly setting column width as10pxit won't work if you try it with the.itemof different size.
– Alexey Petrushin
Jan 20 at 18:31
1
You could replace the 10px withauto
– Siddhesh Rane
Jan 21 at 3:56
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%2f54277675%2fdisplay-list-of-elements-as-table-with-css-only%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
3
You can do this with flexbox by adding a hidden element between the first and last row that will be width:100% thus you will avoid changing the html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>If the number of element is unknown you can consider CSS grid:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
Technically, rather than adding an element, OP could (theoretically) userow-gapin the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition ofrow-gapin that spec).
– David Thomas
Jan 20 at 16:39
Theafterelement not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line.row-gapwould not push the last 3 boxes on a new row and hence would have no effect at all.
– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
add a comment |
3
You can do this with flexbox by adding a hidden element between the first and last row that will be width:100% thus you will avoid changing the html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>If the number of element is unknown you can consider CSS grid:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
Technically, rather than adding an element, OP could (theoretically) userow-gapin the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition ofrow-gapin that spec).
– David Thomas
Jan 20 at 16:39
Theafterelement not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line.row-gapwould not push the last 3 boxes on a new row and hence would have no effect at all.
– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
add a comment |
3
3
3
You can do this with flexbox by adding a hidden element between the first and last row that will be width:100% thus you will avoid changing the html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>If the number of element is unknown you can consider CSS grid:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
You can do this with flexbox by adding a hidden element between the first and last row that will be width:100% thus you will avoid changing the html:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>If the number of element is unknown you can consider CSS grid:
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: flex;
justify-content: space-between;
padding: 10px;
background: #eee;
flex-wrap: wrap;
}
.row:after {
content: "";
width: 100%;
height: 10px;
}
.row :nth-child(n + 4) {
order: 1;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: 10px;
padding:10px;
background: #eee;
}
.row :nth-child(3n + 2) {
margin:auto;
}
.row :nth-child(3n + 3) {
margin-left:auto;
}<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
edited Jan 20 at 21:53
answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
answered Jan 20 at 16:28
Temani AfifTemani Afif
72.3k94080
72.3k94080
Technically, rather than adding an element, OP could (theoretically) userow-gapin the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition ofrow-gapin that spec).
– David Thomas
Jan 20 at 16:39
Theafterelement not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line.row-gapwould not push the last 3 boxes on a new row and hence would have no effect at all.
– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
add a comment |
Technically, rather than adding an element, OP could (theoretically) userow-gapin the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition ofrow-gapin that spec).
– David Thomas
Jan 20 at 16:39
Theafterelement not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line.row-gapwould not push the last 3 boxes on a new row and hence would have no effect at all.
– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
Technically, rather than adding an element, OP could (theoretically) use
row-gap in the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition of row-gap in that spec).– David Thomas
Jan 20 at 16:39
Technically, rather than adding an element, OP could (theoretically) use
row-gap in the flex container. Though this is relatively new addition to the "box assignment" spec (the link above is a link to the definition of row-gap in that spec).– David Thomas
Jan 20 at 16:39
The
after element not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line. row-gap would not push the last 3 boxes on a new row and hence would have no effect at all.– Siddhesh Rane
Jan 20 at 17:21
The
after element not only creates a row gap, but it also is the 4th element in flex order with 100% width to push the other 3 boxes below on a different flex line. row-gap would not push the last 3 boxes on a new row and hence would have no effect at all.– Siddhesh Rane
Jan 20 at 17:21
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
@DavidThomas as siddhesh said, my intention wasn't the gap but to create the second row and while doing this I found it easy to use it for the gap instead of margin that I have to remove from some elements.
– Temani Afif
Jan 20 at 19:11
add a comment |
2
Temani Afif has written a good answer. The flexbox one will work only for 2 to 3 rows but the grid version will work for more items.
The grid CSS can be simplified further by using space-between, thus getting rid of margins and n-th child selectors.
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
Thank you, but as far as I understand, with this line -grid-template-columns: repeat(3,10px)you explicitly setting column width as10pxit won't work if you try it with the.itemof different size.
– Alexey Petrushin
Jan 20 at 18:31
1
You could replace the 10px withauto
– Siddhesh Rane
Jan 21 at 3:56
add a comment |
2
Temani Afif has written a good answer. The flexbox one will work only for 2 to 3 rows but the grid version will work for more items.
The grid CSS can be simplified further by using space-between, thus getting rid of margins and n-th child selectors.
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
Thank you, but as far as I understand, with this line -grid-template-columns: repeat(3,10px)you explicitly setting column width as10pxit won't work if you try it with the.itemof different size.
– Alexey Petrushin
Jan 20 at 18:31
1
You could replace the 10px withauto
– Siddhesh Rane
Jan 21 at 3:56
add a comment |
2
2
2
Temani Afif has written a good answer. The flexbox one will work only for 2 to 3 rows but the grid version will work for more items.
The grid CSS can be simplified further by using space-between, thus getting rid of margins and n-th child selectors.
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
Temani Afif has written a good answer. The flexbox one will work only for 2 to 3 rows but the grid version will work for more items.
The grid CSS can be simplified further by using space-between, thus getting rid of margins and n-th child selectors.
.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>.item {
width: 10px;
height: 10px;
background: black;
}
.row {
display: grid;
grid-template-columns: repeat(3,10px); /*change this*/
grid-gap: 10px;
padding:10px;
background: #eee;
justify-content: space-between; /*add this*/
}
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
answered Jan 20 at 18:07
Siddhesh RaneSiddhesh Rane
34036
34036
Thank you, but as far as I understand, with this line -grid-template-columns: repeat(3,10px)you explicitly setting column width as10pxit won't work if you try it with the.itemof different size.
– Alexey Petrushin
Jan 20 at 18:31
1
You could replace the 10px withauto
– Siddhesh Rane
Jan 21 at 3:56
add a comment |
Thank you, but as far as I understand, with this line -grid-template-columns: repeat(3,10px)you explicitly setting column width as10pxit won't work if you try it with the.itemof different size.
– Alexey Petrushin
Jan 20 at 18:31
1
You could replace the 10px withauto
– Siddhesh Rane
Jan 21 at 3:56
Thank you, but as far as I understand, with this line -
grid-template-columns: repeat(3,10px) you explicitly setting column width as 10px it won't work if you try it with the .item of different size.– Alexey Petrushin
Jan 20 at 18:31
Thank you, but as far as I understand, with this line -
grid-template-columns: repeat(3,10px) you explicitly setting column width as 10px it won't work if you try it with the .item of different size.– Alexey Petrushin
Jan 20 at 18:31
1
1
You could replace the 10px with
auto– Siddhesh Rane
Jan 21 at 3:56
You could replace the 10px with
auto– Siddhesh Rane
Jan 21 at 3:56
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%2f54277675%2fdisplay-list-of-elements-as-table-with-css-only%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
You have strong constraints. Either you modify DOM as given in your example or modify width of items. But you are not allowing both of these.
– Aditya Gupta
Jan 20 at 15:40
Also, this is usually done using a grid library like bootstrap. But they also play on width property.
– Aditya Gupta
Jan 20 at 15:41