Why this layout results so slow especially on mobile?

The code below uses flex to display some divs that act as buttons: the point is to create a basic layout for simple games.

Two problems arises with this style of coding, first being speed of execution and second management of percentage of each container.

style apart, does do the trick on a laptop but it's unusable on mobile devices

what I'm missing? thanks in advance

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">

      html, body{
        width: 100%;
        height: 100%;
      }
      .maincontent{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
      }
      .columncontent{
        width: 25%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .item{
        height: 100%;
      }

      .item:hover{
        border : 12px solid white;
      }

      .a{
        background: blue;
      }
      .b{
        background: red;
      }
      .c{
        background: black;
      }
      .d{
        background: green;
      }
    </style>
  </head>
  <body>
<div class="maincontent">
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
    <div class="columncontent">
      <div class="item a" onclick="handle(this)"></div>
      <div class="item b" onclick="handle(this)"></div>
      <div class="item c" onclick="handle(this)"></div>
      <div class="item d" onclick="handle(this)"></div>
    </div>
</div>
    <script type="text/javascript">
        var handle = function(el){
          if(el.style.background=="green")
            el.style.background="yellow";
          else
            el.style.background = "green";
        }
    </script>
  </body>
</html>

I use SimpleHTTPServer to test over LAN. Testing mobile devices are running iOS and iPadOS only on Safari

Tags: