Responsive Nested Grid Layout
0
In the following code, I have 4 inner grids within an outer grid layout. Both grids are responsive.
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>corresponding fiddle: https://jsfiddle.net/yg05zkx9/5/
Because I used auto-fill for the inner grids, spaces for empty tracks appear for the first grid, where the elements don't reach the last track because of lack of divs.
Is there a way to redistribute empty space from the empty tracks to all the inner grids?
html css css3 css-grid
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
add a comment |
0
In the following code, I have 4 inner grids within an outer grid layout. Both grids are responsive.
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>corresponding fiddle: https://jsfiddle.net/yg05zkx9/5/
Because I used auto-fill for the inner grids, spaces for empty tracks appear for the first grid, where the elements don't reach the last track because of lack of divs.
Is there a way to redistribute empty space from the empty tracks to all the inner grids?
html css css3 css-grid
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
add a comment |
0
0
0
In the following code, I have 4 inner grids within an outer grid layout. Both grids are responsive.
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>corresponding fiddle: https://jsfiddle.net/yg05zkx9/5/
Because I used auto-fill for the inner grids, spaces for empty tracks appear for the first grid, where the elements don't reach the last track because of lack of divs.
Is there a way to redistribute empty space from the empty tracks to all the inner grids?
html css css3 css-grid
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
In the following code, I have 4 inner grids within an outer grid layout. Both grids are responsive.
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>corresponding fiddle: https://jsfiddle.net/yg05zkx9/5/
Because I used auto-fill for the inner grids, spaces for empty tracks appear for the first grid, where the elements don't reach the last track because of lack of divs.
Is there a way to redistribute empty space from the empty tracks to all the inner grids?
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>html css css3 css-grid
html css css3 css-grid
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
edited Nov 16 '18 at 6:31
TylerH
16.1k105569
16.1k105569
asked Nov 16 '18 at 6:16
yarnayyarnay
11
asked Nov 16 '18 at 6:16
yarnayyarnay
11
asked Nov 16 '18 at 6:16
yarnayyarnay
11
11
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Just change this css and you're done with best possible way...
from
.grid > * > *
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
to
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
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%2f53332433%2fresponsive-nested-grid-layout%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Just change this css and you're done with best possible way...
from
.grid > * > *
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
to
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
add a comment |
1
Just change this css and you're done with best possible way...
from
.grid > * > *
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
to
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
add a comment |
1
1
1
Just change this css and you're done with best possible way...
from
.grid > * > *
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
to
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
Just change this css and you're done with best possible way...
from
.grid > * > *
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
to
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>.grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
border: 2px red solid;
.grid > * > *
border: 2px blue dashed;
display: grid;
grid-auto-rows: auto;
.grid > * > * > *
border: 1px green dashed;
.grid > * > *
grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
<div class="grid">
<div>
<div>
<div>1</div>
<div>1</div>
</div>
</div>
<div>
<div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
<div>2</div>
</div>
</div>
<div>
<div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
<div>3</div>
</div>
</div>
<div>
<div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
<div>4</div>
</div>
</div>
</div>answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
answered Nov 16 '18 at 6:28
ElusiveCoderElusiveCoder
1,4111320
1,4111320
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
add a comment |
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
Try adding elements in first column containing 1
– ElusiveCoder
Nov 16 '18 at 6:30
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
auto-fit only redistributes the space from the empty tracks to the grid elements in the same “inner” grid, is there a way to redistribute this space to the outer grid? Hence it is a nesting problem
– yarnay
Nov 16 '18 at 11:02
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%2f53332433%2fresponsive-nested-grid-layout%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
