How to deal with off-grid image placement ?
#css#html
Saugat Rai

Saugat Rai @raisaugat

About: Been working with frontend stuff and lately more into React

Location:
Kathmandu, Nepal
Joined:
Mar 31, 2019

How to deal with off-grid image placement ?

Publish Date: May 22 '19
5 3

Is there an easy way to achieve this type of design with ease?
Layout Design

The whole width of the layout is 1440px. The content placement is within 1330px(suppose).
Is there any way so that I can work within the 1330px container?

Comments 3 total

  • Tyler V.
    Tyler V.May 22, 2019

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

    • Saugat Rai
      Saugat RaiMay 23, 2019

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

      • Tyler V.
        Tyler V.May 23, 2019

        You could use flexbox instead.

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

Add comment