DEV Community

Discussion on: How to deal with off-grid image placement ?

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

If I understand the question correctly, you can achieve this using css grid!

If you need the blue box header, you can format your grid as (roughly):

.container {
    display: grid;
    grid-template-rows: {headerheight} 1fr;
    grid-template-columns: 1fr 1fr;
}

Then you can place a div on the left side area and add padding to format it like this.

Informative guides that may help:
Grid: css-tricks.com/snippets/css/comple...
Flexbox: css-tricks.com/snippets/css/a-guid...

Collapse
 
raisaugat profile image
Saugat Rai

Thanks for the reply. I guess add padding is one of the solution to achieve the above design. But is there any other ways ?
I would definitely try the padding one. :)

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

You could use flexbox instead.

That way if you have a lot of text, it won't still start halfway down the page.