Kevin Powell - Community•3mo ago

How do I make this part?

Hi guys, hope you are doing well. I was wondering, how do I make this part? I used positioning, but it then becomes trash in responsiveness. So, how do I make it without using a grid? I have also tried giving negative margin. @Chris tried his best to explain to me how to overlap images using a grid, but I just can't seem to understand the concept without a video. If anyone has a video on that, please provide it.

5 Replies

Code-S ♛•3mo ago

Sorry chris I am just kind of a slow learner 😔

caldane•3mo ago

I think Kevin's latest video is a good example of this honestly https://www.youtube.com/watch?v=ciuZJE74wBA

Kevin Powell

YouTube

3 underused CSS Grid features

Looking to step up your CSS? I have both free and premium courses 👉 https://www.kevinpowell.co/courses/ Grid is awesome, and there are some neat tricks that you can do with it that I don’t see enough people taking advantage of, like overlapping named grid lines, using position absolute with grid, and animating template-rows and template-columns...

clevermissfox•3mo ago

You can just give both elements the same grid-area: name; and then use the alignment properties as needed to adjust Oh just saw your image. You just want a portion to overlap

.my-grid {
grid-template-columns: [text-start] 1fr [img-start] 3rem [text-end] 1fr [img-end] ;

grid-template-rows: [img-start] 1fr [text-start] auto [text-end] 1fr [img-end] ;
}
.my-text{grid-area: text;}
.my-image {grid-area: img;}

.my-grid {
grid-template-columns: [text-start] 1fr [img-start] 3rem [text-end] 1fr [img-end] ;

grid-template-rows: [img-start] 1fr [text-start] auto [text-end] 1fr [img-end] ;
}
.my-text{grid-area: text;}
.my-image {grid-area: img;}

Adjust the 3rem to the amount you want to overlap , probably within a minmax ()

Chris Bolson•3mo ago

Using grid, the method that Kevin explains in that video and that clevermissfox has outlined, is probably the best way to go. Just to throw another method in the hat (and no doubt confuse you more) you could also do this with translate to create a fun responsive effect when you resize the viewport. https://codepen.io/cbolson/pen/BagWrzm On smaller screens the elements are shown in a simple column but on larger screens the slide around to be placed as per your image. This method would really only work on a stand-alone component which your image looks like it is. Getting this to work within a full webpage would be more complicated (though not impossible) as it may leave unwanted spaces. I really just wanted to show it to you as another method for positioning elements (without them being absolute).

Code-S ♛•3mo ago

THANK YOU GUYS although it took me 6 hours watching alot of videos on youtube and play around with grid to understand this thing to just overlap I am grateful that atleast i know the basics of grid now

Gaming

Programming

How do I make this part?