Kevin Powell - Community•4w ago

Complex section

I have no real clue how to start doing this section nor do I know how to properly make this responsive that it also look good. (I did not made this design, this is a design I got from school and have to follow)

28 Replies

MarkBoots•4w ago

i see a 2x2 grid with the images place-self: - end start - start start - end end - start end you can layer the text and images with a grid as well (same grid area) with a media query you can make it a single column for the images (or what ever you like)

KingpinOP•4w ago

Hmmm. I think I will have the text layer positioned absolute over the images then a flexbox. This will give me freedom for each layer seperate I think.

b1mind•4w ago

grid for layers + alignment is ❤️

KingpinOP•3w ago

I am just seeing this, will this allow me to basically have 2 different layers that act seperately?

Rägnar O'ock•3w ago

you could do it with a grid like this one (dimensions aren't exact 'cause I'm lazy) :

css 
.grid{ 
  grid:
    ".    .    .    img1 img1 .   " 1fr
    "img2 img2 .    img1 img1 .   " 1fr
    "img2 img2 .    .    .    .   " 1fr
    ".    .    .    .    img4 img4" 1fr
    ".    img3 img3 .    img4 img4" 1fr
    ".    img3 img3 .    .    .   " 1fr
    / 3fr 1fr 1fr 1fr 1fr 3fr;
}

css 
.grid{ 
  grid:
    ".    .    .    img1 img1 .   " 1fr
    "img2 img2 .    img1 img1 .   " 1fr
    "img2 img2 .    .    .    .   " 1fr
    ".    .    .    .    img4 img4" 1fr
    ".    img3 img3 .    img4 img4" 1fr
    ".    img3 img3 .    .    .   " 1fr
    / 3fr 1fr 1fr 1fr 1fr 3fr;
}

Rägnar O'ock•3w ago

https://codepen.io/ragnar_ock/pen/zxvwLRr?editors=1100

Rägnar O'ock

CodePen

background grid images

...

b1mind•3w ago

I mean that is more complex than probably need but I approve Yes you can use absolute or just give them all the same space, isolate is a great feature too so then you have a clean stack.

KingpinOP•3w ago

wait isolate?

b1mind•3w ago

https://codepen.io/b1mind/pen/eYyGwWd?editors=0110

Brent Morton

CodePen

Emoji CSS GRID art

...

b1mind•3w ago

Here is a simple example of just using one area you can also do like > * { grid-area: 1 / -1;} or something Or like ragnar did be very specific

KingpinOP•3w ago

ah it's a grid thing?

b1mind•3w ago

yes isolate helps with z-index mostly but can be handy if you are in a project no isolate is not a grid thing https://developer.mozilla.org/en-US/docs/Web/CSS/isolation I always enjoy ragnars short hand grid and use of areas heh ❤️

b1mind•3w ago

https://codepen.io/b1mind/pen/LYmqGBa

Brent Morton

CodePen

Grid Image overlay with text

...

b1mind•3w ago

another quick example.. I have some more but they seem more confusing than helpful atm LOL these are the simplest

KingpinOP•3w ago

ah but it do anyting with positions? the isolation?

b1mind•3w ago

Yes isolation works for keeping stacking context to that parent Its not needed in this case persay just good to have in the pocket

KingpinOP•3w ago

I have got something to work, I am just using position absolute since both "layers" have to stay at width 100% anways. and then for the images themselves prolly gonna do grid.