re: How to deal with off-grid image placement ? VIEW POST

FULL DISCUSSION
 

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...

 

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. :)

 

You could use flexbox instead.

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

code of conduct - report abuse