Grid properties not working on elements inside grid container
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?
Problem positioning box item inside a CSS Grid
Good on you for trying to learn these things on your own! So couple things:
- You left some css styles blank. Be carful not to do that since that can act unpredictably in some browsers. margin-bottom
in '.header-bar' for example
When dealing with flexbox or grid the only elements that will be effected will be its direct children. So in the case of '.header-grid' the only child is '.header-bar' so making it a grid is redundant.
Going back to the last point might suggest why things aren't working for you. '.container-box', which is the one you want placed in that spot, doesn't have a parent element thats a grid so grid won't effect it. How you fix this depends on what your plan going forward is. You could simply add some margin to the left and top. About 200px and 100px respectively. You could also do something kind of like this Codepen . Those are both kind of dirty ways of getting what you want.
A more proper way would require a reworking of how this is all put together. Utilize containers and steer clear of floats. Instead use flexbox. Doing it that way actually doesn't even require much grid. Heres one of many possible ways this could be cleaned up Codepen. Going forward you'll want to stay away from floats in general. Flexbox and grid allow you to do similar things in a much cleaner and more stable way while also offering more flexibility. Good luck and feel free to follow up if any of this confuses you.
Grid properties on second child element of Accordion not working
This is a simplified Accordion
definition:
<AccordionRoot>
<AccordionSummary />
<TransitionComponent>
<div>
<AccordionDetail />
</div>
</TransitionComponent>
</AccordionRoot>
The reason your AccordionDetail
styles doesn't work is because it's applied to the children of the grid item instead of the grid item itself. To fix it, you need to set the grid properties directly in the child of the grid container which is TransitionComponent
, if you inspect the element you can see the class name of the DOM elelment is MuiCollapse-root
:
<Accordion
sx={{
display: "grid",
gridTemplateColumns: "1fr 2fr 1fr",
"& .MuiCollapse-root": {
gridColumnStart: "2",
gridColumnEnd: "3"
}
}}
>
grid-column doesn't work?
Your problem is that your grid is the 'main' element and 'download_desc' is within the 'download' section tag.
Try moving:
display: grid;
grid-template-rows: 750px 500px 815px 815px 180px;
grid-template-columns: repeat(6, 1fr);
to the 'download' class.
Related Topics
How to Align Checkboxes and Their Labels Consistently Cross-Browsers
Change Select List Option Background Colour on Hover
How to Make Css3 Rounded Corners Hide Overflow in Chrome/Opera
Make Flex Items Take Content Width, Not Width of Parent Container
Make Footer Stick to Bottom of Page Correctly
Default Select Option as Blank
Why Does HTML Require That Multiple Spaces Show Up as a Single Space in the Browser
Html5 - Canvas Element - Multiple Layers
Background: Fixed No Repeat Not Working on Mobile
How to Link to Part of a Page - Hash
Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned
Margin-Top Push Outer Div Down
Force to Open "Save As..." Popup Open At Text Link Click For Pdf in Html
How to Escape Ampersands in Xml So They Are Rendered as Entities in Html
What Does Appending "V=1" to CSS and JavaScript Urls in Link and Script Tags Do