#123 - Snake - Manoj Kumar

Well, the standard game on every old Nokia mobile. On first glance, I thought of using CSS Grid for this using grid-template-areas but not sure why I felt like flexbox looked like a good way for me.


<div a>
  <div a1></div>
  <div a2>
    <div c></div>
    <div c></div>
    <div c></div>
    <div c></div>
    <div c></div>
  </div>
</div>

<style>
  body {
    background: #C74E4E;
  }

  [a] {
    display: flex;
    justify-content: space-between;
    width: 220px;
    transform: translate(82px,82px);
  }

  [a1] {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
  }

  [a2] {
    display: flex;
    gap: 5px;
  }

  [c] {
    width: 20px;
    height: 20px;
    background: #E0E246;
    border-radius: 5px;
  }
</style>