How to make CSS Grid last row to take up remaining space
I have a grid with variable number of rows and I want the last one to be 1fr height.
Something like this:
Is there any way of doing that?
css css3 css-grid
edited Nov 20 at 17:15
Michael_B
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
add a comment |
I have a grid with variable number of rows and I want the last one to be 1fr height.
Something like this:
Is there any way of doing that?
css css3 css-grid
edited Nov 20 at 17:15
Michael_B
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15
add a comment |
I have a grid with variable number of rows and I want the last one to be 1fr height.
Something like this:
Is there any way of doing that?
css css3 css-grid
edited Nov 20 at 17:15
Michael_B
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
I have a grid with variable number of rows and I want the last one to be 1fr height.
Something like this:
Is there any way of doing that?
css css3 css-grid
css css3 css-grid
edited Nov 20 at 17:15
Michael_B
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
edited Nov 20 at 17:15
Michael_B
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
edited Nov 20 at 17:15
Michael_B
144k47229338
edited Nov 20 at 17:15
Michael_B
144k47229338
edited Nov 20 at 17:15
Michael_B
144k47229338
144k47229338
asked Nov 20 at 13:44
gfpacheco
1,65321833
asked Nov 20 at 13:44
gfpacheco
1,65321833
asked Nov 20 at 13:44
gfpacheco
1,65321833
1,65321833
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15
add a comment |
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15
add a comment |
1 Answer
1
active
oldest
votes
you could use flex for this.
Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.
After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.
See the snippet below:
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>Link to JsFiddle
answered Nov 20 at 18:41
morgul
2,55942433
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
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%2f53394402%2fhow-to-make-css-grid-last-row-to-take-up-remaining-space%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
you could use flex for this.
Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.
After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.
See the snippet below:
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>Link to JsFiddle
answered Nov 20 at 18:41
morgul
2,55942433
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
add a comment |
you could use flex for this.
Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.
After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.
See the snippet below:
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>Link to JsFiddle
answered Nov 20 at 18:41
morgul
2,55942433
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
add a comment |
you could use flex for this.
Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.
After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.
See the snippet below:
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>Link to JsFiddle
answered Nov 20 at 18:41
morgul
2,55942433
you could use flex for this.
Te parent container should have display: flex;. We want to use it vertically, so we will change the flex direction like this flex-direction: column;.
After this, we will use the property flex-shrink: 1; for every child. This way, it will take only the space needed/specified. The tricks for the last child is to use the property flex-grow: 1; so it will take the available space.
See the snippet below:
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>Link to JsFiddle
html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>html, body {
height: 100%;
}
.fill-height {
height: 100%;
display: flex;
flex-direction: column;
}
.fill-height > div {
border: 1px solid red;
min-height:2em;
flex-shrink: 1;
}
.fill-height > div:last-child {
flex-grow: 1;
}<section class="fill-height">
<div>
row 1 (shrink)
</div>
<div>
row 2 (shrink)
</div>
<div>
row 3 (grow)
</div>
</section>answered Nov 20 at 18:41
morgul
2,55942433
answered Nov 20 at 18:41
morgul
2,55942433
answered Nov 20 at 18:41
morgul
2,55942433
answered Nov 20 at 18:41
morgul
2,55942433
2,55942433
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
add a comment |
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
1
1
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
Thanks for the great answer! I was hoping to be able to use grid, but I really think that's not possible.
– gfpacheco
Nov 20 at 19:53
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53394402%2fhow-to-make-css-grid-last-row-to-take-up-remaining-space%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
Can you post more details and the code you've tried? Otherwise, if your question really is that simple, then the answer would be no. But maybe there's another way to achieve your goal. So posting more details and all relevant code may be useful.
– Michael_B
Nov 20 at 17:15