CSS stay and fit into the grid
Hello, How can I do that to every item stay in ther grid place and fit in it. Menu in menu,Image in img, Buttons in buttons. On mobile, tablet, 4k screen, so it have to be responsive. All centered. Here is the example https://codepen.io/lanszelot/pen/ZERQrqR
12 Replies
What you are doing wont work. By setting the parent grid to relative and pos absolute and using grid-area. What you want is subgrid to do this and its not fully supported yet.
So to use grid-areas they need to be children of teh grid parent (without pos: absolute)
First of all, thanks for your answer. How can I do that?
children of the grid parent?
Kevin Powell
YouTube
The secret to mastering CSS layouts
Deep dive this topic, and much more, in my course CSS Demystified: https://cssdemystified.com/?utm_campaign=css-relationships&utm_source=youtube&utm_medium=description
🔗 Links
✅ Why flex items with padding aren’t the same size (it’s an article, not video, sorry!): https://youtu.be/fm3dSg4cxRI
✅ Flexbox or grid - How to decide? https://youtu.b...
the width cannot be auto, because mobile can be landscape, and portrait mode so I have to use orientation, where I have to setup width
That video was to clear up child/parent relationships
I do not understand it
I am a beginner. I not study it. I just do it for fun only
Its a very important concept you should learn to be able to use CSS correctly
but if I cannot understand what he explain in the video
I cannot see the example behind his head what he do
he explain not for beginners
and I cannot see what I have to see. What he does with the lines
Seems to me like you didn't try and I can't explain it better than Kevin so cheers. gl
ok, thanks 🙂
maybe someone with more time will offer help, or if you frame/show what you are expecting the result to be (a sketch or img of the design)
Hello,
I made it. I used orientation everywhere and vh vw.
🙂