Make a grid item span to the last row / column
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
Lets say I have the following html with an unknown number of boxes.
How can I make the third .box span from the first grid-line to the last?
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>html css css3 css-grid
edited Jan 23 at 15:36
Michael_B
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
add a comment |
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
Lets say I have the following html with an unknown number of boxes.
How can I make the third .box span from the first grid-line to the last?
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>html css css3 css-grid
edited Jan 23 at 15:36
Michael_B
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
6
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10
add a comment |
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
Lets say I have the following html with an unknown number of boxes.
How can I make the third .box span from the first grid-line to the last?
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>html css css3 css-grid
edited Jan 23 at 15:36
Michael_B
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
Lets say I have the following html with an unknown number of boxes.
How can I make the third .box span from the first grid-line to the last?
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>html css css3 css-grid
html css css3 css-grid
edited Jan 23 at 15:36
Michael_B
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
edited Jan 23 at 15:36
Michael_B
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
edited Jan 23 at 15:36
Michael_B
144k47229338
edited Jan 23 at 15:36
Michael_B
144k47229338
edited Jan 23 at 15:36
Michael_B
144k47229338
144k47229338
asked May 18 '17 at 15:45
jbe
1,113720
asked May 18 '17 at 15:45
jbe
1,113720
asked May 18 '17 at 15:45
jbe
1,113720
1,113720
6
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10
add a comment |
6
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10
6
6
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10
add a comment |
4 Answers
4
active
oldest
votes
You can add grid-row-start to that boxes css, and set it to span an absurdly high number.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Edit - Disclaimer:
This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.
answered May 18 '17 at 15:55
Hodrobond
1,3711116
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like:last-child)
– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
@George, might be wrong as I did a quick 60 second hack but, update the selector fromnth-childtofirst-child, and updategrid-columnto1?
– Hodrobond
Nov 14 at 0:56
|
show 1 more comment
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.
However, as pointed out in this answer, it may be possible with absolute positioning.
While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.
Use negative integers.
Here are two interesting sections in the CSS Grid specification:
7.1. The Explicit Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.
and here...
8.3. Line-based Placement: the
grid-row-start,grid-column-start,grid-row-end, andgrid-column-endproperties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
In other words, when dealing with an explicit grid, which is a grid that you define using these properties:
grid-template-rowsgrid-template-columnsgrid-template-areas
... you can make a grid area span all columns by setting this rule:
grid-column: 3 / -1;
That tells the grid area to span from the third column line to the last column line.
The reverse would be:
grid-column: 1 / -3;
Again, this method works only in explicit grids.
answered May 18 '17 at 16:49
Michael_B
144k47229338
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
The explicit grid are the rows and columns you define using thegrid-template-*properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.
– Michael_B
May 18 '17 at 21:21
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
|
show 1 more comment
A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver in some cases. Here is a full example:
.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>answered May 3 at 18:03
Fanus du Toit
436513
add a comment |
So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.
Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.
.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>answered Jul 9 at 8:48
Duck
12
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%2f44052336%2fmake-a-grid-item-span-to-the-last-row-column%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can add grid-row-start to that boxes css, and set it to span an absurdly high number.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Edit - Disclaimer:
This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.
answered May 18 '17 at 15:55
Hodrobond
1,3711116
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like:last-child)
– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
@George, might be wrong as I did a quick 60 second hack but, update the selector fromnth-childtofirst-child, and updategrid-columnto1?
– Hodrobond
Nov 14 at 0:56
|
show 1 more comment
You can add grid-row-start to that boxes css, and set it to span an absurdly high number.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Edit - Disclaimer:
This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.
answered May 18 '17 at 15:55
Hodrobond
1,3711116
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like:last-child)
– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
@George, might be wrong as I did a quick 60 second hack but, update the selector fromnth-childtofirst-child, and updategrid-columnto1?
– Hodrobond
Nov 14 at 0:56
|
show 1 more comment
You can add grid-row-start to that boxes css, and set it to span an absurdly high number.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Edit - Disclaimer:
This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.
answered May 18 '17 at 15:55
Hodrobond
1,3711116
You can add grid-row-start to that boxes css, and set it to span an absurdly high number.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>Edit - Disclaimer:
This is a non-optimal solution and does not work in every browser, be careful! Although this may appear to work in some browsers (Chrome), other browsers (Firefox) will create the absurd number of rows which causes problems.
.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>.container
display: grid;
grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%;
grid-template-rows: auto [last-line];
.box
background-color: blue;
padding: 20px;
border: 1px solid red;
.box:nth-child(3)
background-color: yellow;
grid-column: last-col / span 1;
grid-row: 1 / last-line;
grid-row-start: span 9000;
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box">3</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>answered May 18 '17 at 15:55
Hodrobond
1,3711116
edited May 18 '17 at 17:31
answered May 18 '17 at 15:55
Hodrobond
1,3711116
answered May 18 '17 at 15:55
Hodrobond
1,3711116
answered May 18 '17 at 15:55
Hodrobond
1,3711116
1,3711116
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like:last-child)
– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
@George, might be wrong as I did a quick 60 second hack but, update the selector fromnth-childtofirst-child, and updategrid-columnto1?
– Hodrobond
Nov 14 at 0:56
|
show 1 more comment
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like:last-child)
– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
@George, might be wrong as I did a quick 60 second hack but, update the selector fromnth-childtofirst-child, and updategrid-columnto1?
– Hodrobond
Nov 14 at 0:56
1
1
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like
:last-child)– jbe
May 18 '17 at 21:02
imo chomes handles this correct while firefox does not. makes no sense to create those rows if there is no content.... sadly there is no "magic" name for the last row (like
:last-child)– jbe
May 18 '17 at 21:02
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
IMO doing what you asked (as FF does) is the correct behavior, even if it messes up the hack. If I had some use for two columns via css, I don't want the Chrome to not create them because the columns are empty. Of course, CSS-grid should be fixed to allow this without a hack.
– SamGoody
Sep 11 at 20:13
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
Seems like Firefox no longer creates the absurd number of rows (or at least columns, which was my need/test). At least, it doesn't report them in its grid debugger.
– Victoria
Oct 24 at 21:06
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
How could you achieve this so the first item of the grid expands as a full height column at the begining of the grid? Like this i.imgur.com/UgdYrYx.png
– George
Nov 12 at 15:15
1
1
@George, might be wrong as I did a quick 60 second hack but, update the selector from
nth-child to first-child, and update grid-column to 1?– Hodrobond
Nov 14 at 0:56
@George, might be wrong as I did a quick 60 second hack but, update the selector from
nth-child to first-child, and update grid-column to 1?– Hodrobond
Nov 14 at 0:56
|
show 1 more comment
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.
However, as pointed out in this answer, it may be possible with absolute positioning.
While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.
Use negative integers.
Here are two interesting sections in the CSS Grid specification:
7.1. The Explicit Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.
and here...
8.3. Line-based Placement: the
grid-row-start,grid-column-start,grid-row-end, andgrid-column-endproperties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
In other words, when dealing with an explicit grid, which is a grid that you define using these properties:
grid-template-rowsgrid-template-columnsgrid-template-areas
... you can make a grid area span all columns by setting this rule:
grid-column: 3 / -1;
That tells the grid area to span from the third column line to the last column line.
The reverse would be:
grid-column: 1 / -3;
Again, this method works only in explicit grids.
answered May 18 '17 at 16:49
Michael_B
144k47229338
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
The explicit grid are the rows and columns you define using thegrid-template-*properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.
– Michael_B
May 18 '17 at 21:21
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
|
show 1 more comment
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.
However, as pointed out in this answer, it may be possible with absolute positioning.
While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.
Use negative integers.
Here are two interesting sections in the CSS Grid specification:
7.1. The Explicit Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.
and here...
8.3. Line-based Placement: the
grid-row-start,grid-column-start,grid-row-end, andgrid-column-endproperties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
In other words, when dealing with an explicit grid, which is a grid that you define using these properties:
grid-template-rowsgrid-template-columnsgrid-template-areas
... you can make a grid area span all columns by setting this rule:
grid-column: 3 / -1;
That tells the grid area to span from the third column line to the last column line.
The reverse would be:
grid-column: 1 / -3;
Again, this method works only in explicit grids.
answered May 18 '17 at 16:49
Michael_B
144k47229338
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
The explicit grid are the rows and columns you define using thegrid-template-*properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.
– Michael_B
May 18 '17 at 21:21
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
|
show 1 more comment
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.
However, as pointed out in this answer, it may be possible with absolute positioning.
While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.
Use negative integers.
Here are two interesting sections in the CSS Grid specification:
7.1. The Explicit Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.
and here...
8.3. Line-based Placement: the
grid-row-start,grid-column-start,grid-row-end, andgrid-column-endproperties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
In other words, when dealing with an explicit grid, which is a grid that you define using these properties:
grid-template-rowsgrid-template-columnsgrid-template-areas
... you can make a grid area span all columns by setting this rule:
grid-column: 3 / -1;
That tells the grid area to span from the third column line to the last column line.
The reverse would be:
grid-column: 1 / -3;
Again, this method works only in explicit grids.
answered May 18 '17 at 16:49
Michael_B
144k47229338
Is it possible to make a grid item span from the first to the last row when I don't know the number of rows?
A natural Grid solution to this problem appears to be missing in the current spec (Level 1). So the answer would be "no", strictly with Grid properties.
However, as pointed out in this answer, it may be possible with absolute positioning.
While CSS Grid cannot make a grid area span all columns / rows in an implicit grid, it can do the job in an explicit grid.
Use negative integers.
Here are two interesting sections in the CSS Grid specification:
7.1. The Explicit Grid
Numeric indexes in the grid-placement properties count from the edges
of the explicit grid. Positive indexes count from the start side,
while negative indexes count from the end side.
and here...
8.3. Line-based Placement: the
grid-row-start,grid-column-start,grid-row-end, andgrid-column-endproperties
If a negative integer is given, it instead counts in reverse, starting
from the end edge of the explicit grid.
In other words, when dealing with an explicit grid, which is a grid that you define using these properties:
grid-template-rowsgrid-template-columnsgrid-template-areas
... you can make a grid area span all columns by setting this rule:
grid-column: 3 / -1;
That tells the grid area to span from the third column line to the last column line.
The reverse would be:
grid-column: 1 / -3;
Again, this method works only in explicit grids.
answered May 18 '17 at 16:49
Michael_B
144k47229338
edited May 7 at 20:33
answered May 18 '17 at 16:49
Michael_B
144k47229338
answered May 18 '17 at 16:49
Michael_B
144k47229338
answered May 18 '17 at 16:49
Michael_B
144k47229338
144k47229338
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
The explicit grid are the rows and columns you define using thegrid-template-*properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.
– Michael_B
May 18 '17 at 21:21
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
|
show 1 more comment
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
The explicit grid are the rows and columns you define using thegrid-template-*properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.
– Michael_B
May 18 '17 at 21:21
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
i do not understand the explicit/implicit part... please explain what that means
– jbe
May 18 '17 at 21:10
1
1
The explicit grid are the rows and columns you define using the
grid-template-* properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.– Michael_B
May 18 '17 at 21:21
The explicit grid are the rows and columns you define using the
grid-template-* properties on the container. The implicit grid are the rows and columns automatically generated by the container to accommodate grid items that are positioned outside of the explicit grid.– Michael_B
May 18 '17 at 21:21
1
1
great explanation, thank you
– jbe
May 18 '17 at 21:22
great explanation, thank you
– jbe
May 18 '17 at 21:22
1
1
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
negative integers for grid-row do not work for me either in any browser.
– Ben
Jun 28 '17 at 21:25
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
This answer is not valid. You would have to know the amount of rows to explicitly define in order for -1 to work. The original questions is about implicit rows as well.
– Jason T Featheringham
Jul 30 '17 at 11:04
|
show 1 more comment
A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver in some cases. Here is a full example:
.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>answered May 3 at 18:03
Fanus du Toit
436513
add a comment |
A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver in some cases. Here is a full example:
.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>answered May 3 at 18:03
Fanus du Toit
436513
add a comment |
A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver in some cases. Here is a full example:
.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>answered May 3 at 18:03
Fanus du Toit
436513
A solution that actually worked for me to set position: absolute; on the element you want to grow to the end. This will have its drawbacks but could be a life saver in some cases. Here is a full example:
.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>.grid
display: grid;
grid-template: auto / auto 22px auto;
position: relative;
.vline
position: absolute;
height: 100%;
width: 2px;
background-color: black;
grid-column: 2 / span 1;
margin: 0 10px;
.grid h1:nth-child(1) grid-row: 1; grid-column: 1; text-align: right;
.grid p:nth-child(2) grid-row: 2; grid-column: 1; text-align: right;
.grid h1:nth-child(3) grid-row: 3; grid-column: 3;
.grid p:nth-child(4) grid-row: 4; grid-column: 3;
.grid h1:nth-child(5) grid-row: 5; grid-column: 1; text-align: right;
.grid p:nth-child(6) grid-row: 6; grid-column: 1; text-align: right;
.grid h1:nth-child(7) grid-row: 7; grid-column: 3;
.grid p:nth-child(8) grid-row: 8; grid-column: 3;
p, h1 margin: 0; padding: 0; <div class="grid">
<h1>1.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>2.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>3.</h1>
<p>In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<h1>4.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dui nulla, dictum sed tortor ut, tempus posuere odio.</p>
<div class="vline"></div>
</div>answered May 3 at 18:03
Fanus du Toit
436513
answered May 3 at 18:03
Fanus du Toit
436513
answered May 3 at 18:03
Fanus du Toit
436513
answered May 3 at 18:03
Fanus du Toit
436513
436513
add a comment |
add a comment |
So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.
Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.
.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>answered Jul 9 at 8:48
Duck
12
add a comment |
So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.
Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.
.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>answered Jul 9 at 8:48
Duck
12
add a comment |
So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.
Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.
.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>answered Jul 9 at 8:48
Duck
12
So if it doesn't seem possible yet, you might opt for changing the structure and nest the grid.
Use JavaScript to take out the third box and place it besides your original grid container, if you're unable to do that in advance.
.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>.container
display: grid;
grid-template-columns: 65% 35%;
.nested_grid
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-template-rows: auto;
.box
background-color: blue;
padding-bottom: 20px;
border: 1px solid red;
.side
background-color: yellow;
grid-column: 1 -1;
border: 1px solid red;
<div class="container">
<div class="nested_grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="side">3</div>
</div>
<p><a href="gridbyexample.com">gridbyexample.com</a></p>answered Jul 9 at 8:48
Duck
12
edited Jul 9 at 9:02
answered Jul 9 at 8:48
Duck
12
answered Jul 9 at 8:48
Duck
12
answered Jul 9 at 8:48
Duck
12
12
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.
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%2f44052336%2fmake-a-grid-item-span-to-the-last-row-column%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
6
It's really stupid that this basic requirement can't be achieved in a brand new feature of CSS.
– Matthew Felgate
Aug 11 '17 at 8:10