Site with CSS Grid, CSS variable & little bit of CSS Flexbox

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Impressive work @abhineetkandele.

  I would like to comment on the layout, you didn't have to use the different grid containers to make this layout. In fact, Grid is very good with two dimension layouts [ horizontal & vertical ].

  • code example.

  .grid {
    display: grid;
    grid-template-areas: "header header" "section1 section2";
    grid-template-columns: 1fr 1fr; // to give the columns equal widths
  }
  

   <article class="grid">
      <header class="header"> ... </header>
      <section class="section1"> ... </section>
      <section class="section2"> ... </section>
  </article>
  

  Happy coding!

  Marked as helpful

  0

  ---

  

  Abhineet Kandele•320

  @abhineetkandelePosted over 3 years ago

  @jmnyarega Yeah totally agree. I can definitely improve that. Thanks for your valuable comment.

  0
• 

  Yashasvi Singh•890

  @aUnicornDevPosted over 3 years ago

  While naming colors in :root elements, instead of using direct color name, try using notation for primary and secondary color. --color-primary:hsl(179, 62%, 43%); Can also add --color-primary-text if its for text or background as per the requirement

  The solution is pretty good. No doubt there.

  Marked as helpful

  0

  ---

  

  Abhineet Kandele•320

  @abhineetkandelePosted over 3 years ago

  @aUnicornDev Thanks for pointing this out. Will use this notation.

  0