Ufdjrw

What is the word for reserving something for yourself before others do?

Modeling an IP Address

Where does SFDX store details about scratch orgs?

What about the virus in 12 Monkeys?

What killed these X2 caps?

Do I have a twin with permutated remainders?

Forgetting the musical notes while performing in concert

Reserved de-dupe rules

How can I fix/modify my tub/shower combo so the water comes out of the showerhead?

Will google still index a page if I use a $_SESSION variable?

90's TV series where a boy goes to another dimension through portal near power lines

What reasons are there for a Capitalist to oppose a 100% inheritance tax?

How to draw the figure with four pentagons?

Watching something be written to a file live with tail

Twin primes whose sum is a cube

In Romance of the Three Kingdoms why do people still use bamboo sticks when paper had already been invented?

Can I ask the recruiters in my resume to put the reason why I am rejected?

What's the difference between 'rename' and 'mv'?

Can a virus destroy the BIOS of a modern computer?

Why can't we play rap on piano?

Is it possible to run Internet Explorer on OS X El Capitan?

What is going on with Captain Marvel's blood colour?

Why does Arabsat 6A need a Falcon Heavy to launch

How could indestructible materials be used in power generation?

Grid properties not working on elements inside grid container

grid-column doesn't work?Why is my empty cell not working on CSS grids?Why is align/justify-self not working for some grid elements?Grid elements don't alignCSS-GRID Problems aligning content in navbarWhy is my CSS Grid going clockwise?Problem positioning box item inside a CSS GridCSS Grid apply template columns to child div through inline styleHow to put an unordered list in css grid?CSS-Grid Template area not definedRetrieve the position (X,Y) of an HTML elementCreating a div element in jQueryHow to move an element into another element?How do I combine a background-image and CSS3 gradient on the same element?How do I auto-resize an image to fit a 'div' container?Transitions on the display: propertyClick through div to underlying elementsHow to disable resizable property of textarea?How do CSS triangles work?CSS Grid row/column gap on specific elements?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I'm trying to position a nested li (ul li ul li) on a CSS Grid created on the top-most ul. No love yet (it's not working). Maybe it's not possible, or I'm missing something?

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

html css css3 grid css-grid

share|improve this question

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

add a comment | 

2

I'm trying to position a nested li (ul li ul li) on a CSS Grid created on the top-most ul. No love yet (it's not working). Maybe it's not possible, or I'm missing something?

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

html css css3 grid css-grid

share|improve this question

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

add a comment | 

I'm trying to position a nested li (ul li ul li) on a CSS Grid created on the top-most ul. No love yet (it's not working). Maybe it's not possible, or I'm missing something?

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

html css css3 grid css-grid

share|improve this question

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

#orgChart ul.orgChartLevel1 
 display: grid;
 grid-template-columns: 12px auto;
 grid-template-rows: 100px auto auto;
 grid-row-gap: 30px;


#orgChart li.orgChartLevel2b 
 grid-column-start: 2;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 3;

<ul class="orgChartLevel1">
 <li class="orgChartLevel1a">
 <ul class="orgChartLevel2">
 <li class="orgChartLevel2b">
 </li>
 </ul>
 </li>
</ul>

share|improve this question

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

share|improve this question

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

edited Jan 16 '18 at 21:01

Michael_B

158k50255363

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

asked Oct 17 '17 at 23:08

Ted FitzpatrickTed Fitzpatrick

1989

1 Answer
1

active

oldest

votes

6

The scope of a grid formatting context is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

You're trying to apply grid properties to elements that are descendants, but not children, of a grid container. Those elements are outside the scope of grid layout.

Bottom line: You will always need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child.

Note that grid items can also be grid containers.

Also see:

• Positioning content of grid items in primary container (subgrid feature)


• Proper use of flex properties when nesting flex containers


• Is it bad practice to nest CSS Grids?

share|improve this answer

edited Sep 6 '18 at 23:32

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Semi-success! All of the browsers liked the nested grids approach (li.orgChartLevel1a becomes a grid). Now for those pesky old-spec rules and -ms- prefixes for Edge ...
  
  – Ted Fitzpatrick
  Oct 18 '17 at 21:20
  

  
  
  
  

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46800525%2fgrid-properties-not-working-on-elements-inside-grid-container%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

6

The scope of a grid formatting context is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

You're trying to apply grid properties to elements that are descendants, but not children, of a grid container. Those elements are outside the scope of grid layout.

Bottom line: You will always need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child.

Note that grid items can also be grid containers.

Also see:

• Positioning content of grid items in primary container (subgrid feature)


• Proper use of flex properties when nesting flex containers


• Is it bad practice to nest CSS Grids?

share|improve this answer

edited Sep 6 '18 at 23:32

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Semi-success! All of the browsers liked the nested grids approach (li.orgChartLevel1a becomes a grid). Now for those pesky old-spec rules and -ms- prefixes for Edge ...
  
  – Ted Fitzpatrick
  Oct 18 '17 at 21:20
  

  
  
  
  

add a comment | 

6

The scope of a grid formatting context is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

You're trying to apply grid properties to elements that are descendants, but not children, of a grid container. Those elements are outside the scope of grid layout.

Bottom line: You will always need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child.

Note that grid items can also be grid containers.

Also see:

• Positioning content of grid items in primary container (subgrid feature)


• Proper use of flex properties when nesting flex containers


• Is it bad practice to nest CSS Grids?

share|improve this answer

edited Sep 6 '18 at 23:32

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Semi-success! All of the browsers liked the nested grids approach (li.orgChartLevel1a becomes a grid). Now for those pesky old-spec rules and -ms- prefixes for Edge ...
  
  – Ted Fitzpatrick
  Oct 18 '17 at 21:20
  

  
  
  
  

add a comment | 

The scope of a grid formatting context is limited to a parent-child relationship.

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties.

You're trying to apply grid properties to elements that are descendants, but not children, of a grid container. Those elements are outside the scope of grid layout.

Bottom line: You will always need to apply display: grid or display: inline-grid to a parent in order to apply grid properties to the child.

Note that grid items can also be grid containers.

Also see:

• Positioning content of grid items in primary container (subgrid feature)


• Proper use of flex properties when nesting flex containers


• Is it bad practice to nest CSS Grids?

share|improve this answer

edited Sep 6 '18 at 23:32

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

share|improve this answer

edited Sep 6 '18 at 23:32

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363

answered Oct 17 '17 at 23:52

Michael_BMichael_B

158k50255363