How can I build this layout?

HTML-CSS
#1

Hello. I want to build a layout like this one:

layout
layout853×591 6.4 KB

The left section (hero section) takes half the screen width and should behave similar to a fixed div - when scrolling section 1 and 2, it doesn’t change - but when getting to section 3 it should remain behind (as a block div should) along with section 1 and 2. The text inside the hero section should be vertically centered (almost actually).

I think it can be done by setting the hero section a fixed position and when the user scrolled to section 3 and beyond, it should become block. As I use React, and this solution involves Intersection Observer API, I find it pretty hard to combine both as a React beginner, so I seek for an easier solution.

How would you implement a layout like this ?

#2

seems the right thing to use css-grid for

#3

how will css grid keep the hero section text centered relative to viewport ?

#4

the blue section doesn’t seem to need to be fixed , you could just fix the test, but as there are two distinct behaviour it may need more than css

#5

Not sure if I get what you’re trying to do, but does this go in the right direction?

https://codepen.io/jsdisco/pen/vYXrwBX?editors=1100

#6

Yes, this is exactly what I want. Thank you very much !

#7

Pleasure, was interesting to figure out.

1 Like