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:
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>
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 (2)
box shadow
almost hit it with one tag, i dont know why its 99% but i think its because of the percentages