Grid and position

[sgt_spike]

I am designing a page based on the grid and using the example “The Holy Grail Layout” (https://css-tricks.com/css-grid-one-layout-multiple-ways/) with a little variation. I want just the center scroll. So basically the header, footer and both sidebars have a fixed position. The main section in the middle needs to be able to scroll. The only I’m able to do this is have the main section position absolute but then it reduces the width of that grid. Check it out at https://family.spikedevelopments.com/holiday/2018/index.html and please let me know how I can achieve this.

[Beverleyh]

I haven’t looked at the link – no point, on mobile – but based on description alone, what if you used a wrapper div inside of article and do your positioning/scroll stuff on that instead?

To attract helpful responses, try mocking up the issue in a reduced CodePen demo – code is easier for us to troubleshoot there (we’re not restricted to the developer toolbar), and doesn’t come with the weight of all the extra code and distractions of a full website. Note that we only need the minimal amount of JS, CSS and HTML to illustrate the problem. We don’t need your whole codebase.

[sgt_spike]

My bad…I can see how a link would be scary to click on….Anyway the code pen is here

https://codepen.io/sgt_spike/pen/ebOJEG

The center doesn’t seem to scroll all the way to the end

[Beverleyh]

Scrolling panels don’t display well in Safari in mobile so I can’t see the issue directly but did you see/try what I wrote previously?

what if you used a wrapper div inside of article and do your positioning/scroll stuff on that instead?

Except article was the element in the Holy Grail tutorial. In your demo it would be section.

[Paulie_D]

The problem as I see it is that you are using absolute or fixed positioning which causes overlay/

That probably isn’t necessary with CSS-grid.

A much reduced demo of just the essential components and CSS would be ideal. You seem to have dropped the whol codebase in there.

[sgt_spike]

@Paulie_D

Are you say to drop the grid altogether and use a more native layout?

@Beverleyh

I changed the section to an article element. Not much difference. I researched the difference in the two.

I wrapped the elements of the article in a div and it did allow for the scroll of the main section. But using a grid, I would think the grid would stay in tact using position. I will post my changes in the pen used above.

[Beverleyh]

Like Paulie_D said, a much reduced demo would be easier for us to work with and offer suggestions for. If you edit your CodePen above, please pare it back so that only the basic structural HTML elements exist, along with very minimal CSS for just that structure, and the immediate layout problem. Also remove any non-critical styling such as fonts, font colours, images, etc.

[sgt_spike]

I believe I have what I’m looking for in regards to the center row.

https://codepen.io/sgt_spike/pen/JwoXZz

My only desire is to have the entire grid fit in the viewport. Mainly the height. The width works. the grid stretches to the full width of the viewport. How do I get the height to do the same and be responsive?

[Paulie_D]

Here you go.

https://codepen.io/Paulie-D/pen/pqvENv

https://stackoverflow.com/questions/52785750/prevent-grid-area-from-expanding-causing-whole-page-to-scroll

[Author]

Posts