DEV Community 👩‍💻👨‍💻

Cover image for CSSBattle | #30 Horizon
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

CSSBattle | #30 Horizon

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #30 Horizon challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.


Challenge:

Horizon Challenge


Solution:

<div class="container">
  <div class="layer one"></div>
  <div class="layer two"></div>
  <div class="layer three"></div>
  <div class="layer four"></div>
</div>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: repeat(1fr, 6);
  }
  .layer {
    width: 100%;
  }
  .one {
    background: #F7EC7D;
  }
  .two {
    background: #E38F66;
  }
  .three {
    background: #AA445F;
  }
  .four {
    background: #62306D;
  }
  .one, .two {
    grid-row: span 1;
  }
  .three, .four {
    grid-row: span 2;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • using display grid to align children elements vertically
  • using span property within display grid for children elements to take up spaces evenly

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

Top comments (0)

🌚 Life is too short to browse without dark mode