rachelandrew
Correct way of display a responsive CSS Grid with header overlay
Hi
I'm starting to get to grips (well i hope so) with CSS Grids but i'm not sure i'm using it correctly. I've been following gridbyexample and there seems to be quite a few ways when placing columns and rows and i'm now confused.
Please see my code here: https://codepen.io/juanmata/full/zwdvxz/
I seem to be getting the effect I want although I'm not sure the code is correct, should I be using grid-template-areas and if so how do I do it when the header is overlaying the other content.
There is also an issue with grid rows, I seem to have to add extra lines of code for the @media queries so there's no gap i.e. when the browser's width is above 992px and the 4 previous grids are on one row, I need to add a lower grid number for footer otherwise it leaves a row.
How would you code the above?
Apologies, just realised I deleted the example by accident.
After playing about more with css-grid, I hope this is the correct way of writing the code.
Basically, I am wanting a full screen hero image 100% height and width with an 80px header hovering over the image, finally a footer which will sit under the hero and will be displayed when you scroll down.
In order to do this I have had to use calc(100vh - 80px) within grid-template-rows which i'm not sure is the correct way to do it? If i just use 100vh it doesn't calculate the 80px header which hovers over the main content.
Please find the new example here: https://codepen.io/juanmata/pen/RVMbmr
Once I have achieved this, next on my list is a responsive touch slider using css-grid.
Also, do transitions not work with css-grid?
I am trying to make the header sticky and make smaller when scrolling down the page, i've got this working but the transitions won't work? See the above example for a working version.
Please ask one question at a time, including a reduced test case. So simplify your example right down to the bare minimum needed to show the issue.
@juanmata09 Unfortunately CSS transitions don't work on CSS Grids. Hopefully it will be added at a later stage.
Personally I don't think there's anything "wrong" with the way you added a calc() for your rows... it works fine and I don't see any reason it would cause problems with maintenance or anything. However I did come up with a slightly altered option:
https://codepen.io/IOIIOOIO/pen/POzxzq
