CSS Battle #122 – Tetris

[Narigo]

Link to battle:

Let's battle! ⚔️

Copy the code block below to format your comment on the discussion thread:

<details>
<summary>Code Source – <strong>score {characters}</strong></summary>
<!-- have to be followed by an empty line! -->

```html
your cssbattles code here!
```

</details>

What others will see:

This will result in a nice hidden bit like so:

Code Source – score {characters}

your cssbattles code here!

[Narigo]

It's a grid? – 608.03 {410}

<p><p><p><p><p r><p>
<p><p><p><p r><p r><p>
<p y><p y><p><p r><p><p>
<p y><p y><p r><p><p p><p>
<p r><p r><p r><p t><p p><p p>
<p y><p t><p t><p t><p p><p t>
<style>
  body>* {
    margin:0;
    background: var(--c,#173889);
  }
  [r]{--c:#EE4F63}
  [p]{--c:#B069F7}
  [y]{--c:#F8DA37}
  [t]{--c:#2CE1EA}
  body{margin:0 50;display:grid;grid-template-columns:repeat(6, 1fr);gap:6px;background:#173889}
</style>

[meg-gutshall]

I refactored yours – 610.1 {386}

<p><p><p><p><p r><p>
<p><p><p><p r><p r><p>
<p y><p y><p><p r><p><p>
<p y><p y><p r><p><p p><p>
<p r><p r><p r><p t><p p><p p>
<p y><p t><p t><p t><p p><p t>
<style>
  * {
    margin:0;
    background: var(--c,#173889);
  }
  [r]{--c:#EE4F63}
  [p]{--c:#B069F7}
  [y]{--c:#F8DA37}
  [t]{--c:#2CE1EA}
  body{margin:0 50;display:grid;grid-template-columns:repeat(6, 1fr);gap:6px}
</style>

[Arvind644]

Code Source – 600.19 {802}

<p y></p>
<p y></p>
<p></p>
<p y></p>
<p y></p>
<p y></p>
<p></p>
<p t></p>
<p id="a"></p>
<p></p>
<p></p>
<p t></p>
<p></p>
<p id="b"></p>
<p t></p>
<p t></p>
<p id="c"></p>
<p p></p>
<p p></p>
<p p></p>
<p p id="last"></p>
<p t></p>
<style>
  body {
    background: #173889;
    display: grid;
    align-content: end;
    margin: 0px 50px;
    gap: 6px;
    grid-template: repeat(4, auto) / repeat(6, auto);
    grid-auto-flow: column;
  }
  p {
    background: #EE4F63;
    width: 45px;
    height: 45px;
    margin: 0px;
  }
   #last {
    grid-row-start: 3;
  }
   #a {
    translate: 51px -51px;
  } 
 #b {
    translate: 51px -102px;
  }
  #c {
    translate: 0px -102px;
  }
  [y] {
    background: #F8DA37;
  }
  [p] {
    background: #B069F7;
  }
  [t] {
    background: #2CE1EA;
  }
</style>

[meg-gutshall]

First attempt – 602.42 {536}

<p><p><p><p><p p><p>
<p><p><p><p p><p p><p>
<p y><p y><p><p p><p><p>
<p y><p y><p p><p><p l><p>
<p p><p p><p p><p a><p l><p l>
<p y><p a><p a><p a><p l><p a>
<style>
  * {
    background: var(--b, #173889);
  }
  body {
    display: flex;
    flex-wrap: wrap;
    place-items: start;
    place-content: end center;
    gap: 6px;
    margin: 0 50;
  }
  p {
    width: 45;
    height: 45;
    margin: 0;
  }
  [y] {
    --b: #F8DA37;
  }
  [p] {
    --b: #EE4F63;
  }
  [a] {
    --b: #2CE1EA;
  }
  [l] {
    --b: #B069F7;
  }
</style>