Streaming live at 10am (PST)

Quick question: what's the best way to do this in webflow?

Hello!
I’m making this layout:

Could someone tell me what’s the best way of doing this?
I have the black section, a white section and the picture overlaps both sections.

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @kwievu how are you doing?

There’s no best way. The easiest, in my opinion, is just use Grid Layout. Grid is the easiest way to overlap content like that without filling your content with unnecessary markup.

The grid way:

  1. Create a<section>
  2. Give it display: grid. In this example I used 4 columns and 6 rows
  3. Inside the section, put:
    1. One empty div
    2. Your content (headings, paragraphs, images, etc)
  4. Give your empty div a background-color: black
  5. Lay out grid child as manual

You’ll get something like this example:
https://preview.webflow.com/preview/gilsons-trendy-project-18e0a4?utm_medium=preview_link&utm_source=designer&utm_content=gilsons-trendy-project-18e0a4&preview=0c6b126d8e30f1fc3da46d13aa9d0038&mode=preview

Hello Gilson!
Thank you i’m good how are you?

Thanks for the great explanation and the link!! I’m going to try it and let you know how it worked out :slight_smile:

Cheers.

Playing with the grid, but it’s coming all together!
Thanks for the help Gilson!

Hi Gilson,
So i’ve completed the project with grid on de desktop, but I noticed that some older browsers do not support grid, so my website looks all wrong. Is there a way to fix it?

Thank you!