Can this be done with CSS Grids?

HTML & CSS
1

I’m trying to learn grid and I was trying to get something like this to work and I can’t get anywhere?

The white and the brown are rows, how would you overlap the image by not using the usual absolute possition.

I have this so far which is absolutely rubbish.

Based on that.

  • how do I bring the “branding” and description closer together?

  • Most importantly how do I move the image to overlap in the other row

I want to get this effect:

1012×926 109 KB

1 Like
2

Hi, I’m on a mobile at the moment so can’t provide code but can offer some suggestions especially as you want to learn anyway :).

The simplest answer to overlap the image would be to a apply a translate Y transform to the image and just drag it into the overlap position you want. Of course that could create issues if other content was in the way as the transformed section doesn’t take part in the flow of the page.

To do it in grid without using a transform you would need to create 4 rows (and probably 4 columns but 2 may suffice). Then you can span the image across the rows to create the overlap. Elements in grid can span rows but you have to define their grid positions etc.

https://www.w3.org/TR/css3-grid-layout/#line-placement

There’s probably other ways to do this but those were my first thoughts. Have a go yourself first but I’ll put up a demo later today when I get back. It may be that there are other tweaks needed but until you start coding they don’t become obvious :slight_smile:

1 Like
3

Rough and ready demo here.:slight_smile:

(Only actually needed 3 rows as I split the background colours with a gradient instead.)

Click “edit on codepen” link to see full size.

3 Likes
4

That’s great, thank you.

The reason for the late reply is because I tried to tweak your code to see how I could do it without the gradient but I can’t get my head around it.

Thank you.

1 Like
5

You would probably need to create 4 rows instead of three if you want the background attached to each individual section.

The gradient does the trick more efficiently and keeps the HTML succinct.

Was there something you needed that the gradient didn’t accomplish or were you just testing other methods?

6

Just for fun here’s another way to color the blocks but is not as nice as the gradient method and requires a knowledge of the grid row dimensions so is what is called a magic number fix.

I’ve coloured each section differently so you can see where the colors are applied. It uses the :before element to place the overlapping background segments absolutely into position.

7

With your code, I finally get the kind of thing that I originally was trying to do but couldn’t get to work.

I’m wondering if I make the images smaller, is there a way (with flex or grid) to place the first image at the bottom?

1 Like
8

I’m not following what you want. ‘At the bottom’ in relation to what?

If you mean the image on the left then it already is effectively at the bottom as it’s that image that creates the height anyway.

I must be missing what you want :slight_smile:

1 Like
9

Sorry my bad. It’s the same as with the .description section I just needed this:

.img{
    display: flex;
    margin: auto auto 0 auto; 
}

Thanks again.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.