Skip to content

Instantly share code, notes, and snippets.

@morehwachege

morehwachege/5-x-5-chess-board.markdown

Created June 7, 2022 11:05
Show Gist options
  • Save morehwachege/f76950810637afb48b86c3441079b7a7 to your computer and use it in GitHub Desktop.
Save morehwachege/f76950810637afb48b86c3441079b7a7 to your computer and use it in GitHub Desktop.
Download ZIP
5 X 5 Chess board
Raw
index.html
<body>
<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</body>
Raw
style.css
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin: 30px;
width: 100%;
height: auto;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
background-color: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: 200px;
}
.container :nth-child(2n){
background-color: black;
}
/* .item{
height: 150px;
} */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment