markdown guide

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:


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.

Classic DEV Post from Jul 19 '18

What happens when you type '' into a browser and press Enter?

My most favorite interview question ever.

Saugat Rai profile image