How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:
And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:
This is my grid layout code.
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!
Working Example
https://codepen.io/IvanS95/pen/NEYdxb
html css css3 responsive-design css-grid
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
|
show 8 more comments
I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:
And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:
This is my grid layout code.
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!
Working Example
https://codepen.io/IvanS95/pen/NEYdxb
html css css3 responsive-design css-grid
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
That andauto-filldoesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.
– Paulie_D
Nov 22 '18 at 16:05
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
1
I'm not entirely sure (I'm on mobile), but would:grid-template-columns: repeat(minmax(auto-fill, 3), 260px);address the issue? In my head - and bear in mind I've not tried this in code yet - it should use3as three maximum number of columns, andauto-fillotherwise.
– David Thomas
Nov 22 '18 at 16:53
1
You can't useauto-fillwith a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them.auto-fillwill do exactly that...fill the available space and then wrap.
– Paulie_D
Nov 22 '18 at 17:22
1
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40
|
show 8 more comments
I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:
And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:
This is my grid layout code.
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!
Working Example
https://codepen.io/IvanS95/pen/NEYdxb
html css css3 responsive-design css-grid
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this:
And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this:
This is my grid layout code.
display: grid;
grid-template-columns: repeat(auto-fill, 260px);
justify-content: center;
row-gap: 18px;
column-gap: 18px;
Is there a way to keep the responsive behavior but setting a max number of columns as well? Any help is appreciated; If it can only be done with media-queries that's fine, but I'm first trying to look for ways to do it without using those. Also, I kinda made it work as intended by setting a horizontal padding to the whole grid container to compensate for the size of the additional column; but again, if there's a better way I'm all ears. Thank you!
Working Example
https://codepen.io/IvanS95/pen/NEYdxb
html css css3 responsive-design css-grid
html css css3 responsive-design css-grid
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
edited Nov 22 '18 at 16:46
IvanS95
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
asked Nov 22 '18 at 15:21
IvanS95IvanS95
2,456821
2,456821
That andauto-filldoesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.
– Paulie_D
Nov 22 '18 at 16:05
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
1
I'm not entirely sure (I'm on mobile), but would:grid-template-columns: repeat(minmax(auto-fill, 3), 260px);address the issue? In my head - and bear in mind I've not tried this in code yet - it should use3as three maximum number of columns, andauto-fillotherwise.
– David Thomas
Nov 22 '18 at 16:53
1
You can't useauto-fillwith a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them.auto-fillwill do exactly that...fill the available space and then wrap.
– Paulie_D
Nov 22 '18 at 17:22
1
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40
|
show 8 more comments
That andauto-filldoesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.
– Paulie_D
Nov 22 '18 at 16:05
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
1
I'm not entirely sure (I'm on mobile), but would:grid-template-columns: repeat(minmax(auto-fill, 3), 260px);address the issue? In my head - and bear in mind I've not tried this in code yet - it should use3as three maximum number of columns, andauto-fillotherwise.
– David Thomas
Nov 22 '18 at 16:53
1
You can't useauto-fillwith a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them.auto-fillwill do exactly that...fill the available space and then wrap.
– Paulie_D
Nov 22 '18 at 17:22
1
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40
That and
auto-fill doesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.– Paulie_D
Nov 22 '18 at 16:05
That and
auto-fill doesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.– Paulie_D
Nov 22 '18 at 16:05
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
1
1
I'm not entirely sure (I'm on mobile), but would:
grid-template-columns: repeat(minmax(auto-fill, 3), 260px); address the issue? In my head - and bear in mind I've not tried this in code yet - it should use 3 as three maximum number of columns, and auto-fill otherwise.– David Thomas
Nov 22 '18 at 16:53
I'm not entirely sure (I'm on mobile), but would:
grid-template-columns: repeat(minmax(auto-fill, 3), 260px); address the issue? In my head - and bear in mind I've not tried this in code yet - it should use 3 as three maximum number of columns, and auto-fill otherwise.– David Thomas
Nov 22 '18 at 16:53
1
1
You can't use
auto-fill with a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them. auto-fill will do exactly that...fill the available space and then wrap.– Paulie_D
Nov 22 '18 at 17:22
You can't use
auto-fill with a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them. auto-fill will do exactly that...fill the available space and then wrap.– Paulie_D
Nov 22 '18 at 17:22
1
1
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40
|
show 8 more comments
2 Answers
2
active
oldest
votes
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
1
Will do, I'll just keep using therepeat()function though as it looks cleaner to me, as inrepeat(3, 260px)
– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
add a comment |
Add this code to your CSS:
grid-template-columns: auto auto auto;
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
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
});
}
});
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%2f53434024%2fhow-to-limit-the-amount-of-columns-in-larger-viewports-with-css-grid-and-auto-fi%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
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
1
Will do, I'll just keep using therepeat()function though as it looks cleaner to me, as inrepeat(3, 260px)
– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
add a comment |
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
1
Will do, I'll just keep using therepeat()function though as it looks cleaner to me, as inrepeat(3, 260px)
– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
add a comment |
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
Use this syntax:
grid-template-columns: 260px 260px 260px;
Or
grid-template-columns: repeat(3,260px);
Instead of this:
grid-template-columns: repeat(auto-fill, 260px);
Use media queries to set less columns on smaller screens.
Also if the row and column gap is the same you can use grid-gap.
Documentation
.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>.grid-container{
display: grid;
grid-template-columns: 260px 260px 260px;
grid-gap: 18px;
background-color: #fff;
color: #444;
justify-content: center;
}
.card {
border: 1px solid #000;
width: 260px;
height: 260px;
}<div class="container">
<div class="grid-container">
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
<div class="grid-item">
<div class="card"></div>
</div>
</div>
</div>answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
edited Nov 23 '18 at 14:16
answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
answered Nov 23 '18 at 0:25
WimanicesirWimanicesir
668212
668212
1
Will do, I'll just keep using therepeat()function though as it looks cleaner to me, as inrepeat(3, 260px)
– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
add a comment |
1
Will do, I'll just keep using therepeat()function though as it looks cleaner to me, as inrepeat(3, 260px)
– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
1
1
Will do, I'll just keep using the
repeat() function though as it looks cleaner to me, as in repeat(3, 260px)– IvanS95
Nov 23 '18 at 14:12
Will do, I'll just keep using the
repeat() function though as it looks cleaner to me, as in repeat(3, 260px)– IvanS95
Nov 23 '18 at 14:12
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
Solid point @IvanS95, I'm going to edit it in for future reference :)
– Wimanicesir
Nov 23 '18 at 14:15
add a comment |
Add this code to your CSS:
grid-template-columns: auto auto auto;
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
add a comment |
Add this code to your CSS:
grid-template-columns: auto auto auto;
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
add a comment |
Add this code to your CSS:
grid-template-columns: auto auto auto;
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
Add this code to your CSS:
grid-template-columns: auto auto auto;
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
answered Nov 23 '18 at 10:43
Joykal InfotechJoykal Infotech
1,199316
1,199316
add a comment |
add a comment |
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.
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%2f53434024%2fhow-to-limit-the-amount-of-columns-in-larger-viewports-with-css-grid-and-auto-fi%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
That and
auto-filldoesn't really mean "responsive". I'm sure there are better options if you can actually demostrate the issue.– Paulie_D
Nov 22 '18 at 16:05
How they don't demonstrate the issue? Read again, I said I intend the grid to show the two rows as in the first picture, instead of filling another column and showing them like in the second picture, but thanks anyway
– IvanS95
Nov 22 '18 at 16:10
1
I'm not entirely sure (I'm on mobile), but would:
grid-template-columns: repeat(minmax(auto-fill, 3), 260px);address the issue? In my head - and bear in mind I've not tried this in code yet - it should use3as three maximum number of columns, andauto-fillotherwise.– David Thomas
Nov 22 '18 at 16:53
1
You can't use
auto-fillwith a set number of columns...it's not possible nor is it expected behaviour. If you know how many columns you want, just define them.auto-fillwill do exactly that...fill the available space and then wrap.– Paulie_D
Nov 22 '18 at 17:22
1
As a trvial solution, you can set a max-width to the grid
– vals
Nov 22 '18 at 20:40