GRID-MDFK | CSS: dispondo elementos com Flexbox e Grid

<style>
    * {
margin: 0;
padding: 0;
box-sizing: border-box;
        }

        .corpo {

            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;

            background-color: #444444;
            padding: 8px;
            width: 100vw;
            height: 100vh;
        }

        .cabecalho {
            background-color: #cc2a2a;
            border-radius: 10px;
            min-width: 50px;
            min-height: 50px;
            margin: 8px;
            grid-column: span 4;
            grid-row: span 1;
        }

        .lateral {
            background-color: #45cc2a;
            border-radius: 10px;
            min-width: 50px;
            min-height: 50px;
            margin: 8px;

            grid-column: span 1;
            grid-row: span 3;
        }

        .meio {
            background-color: #2aa6cc;
            border-radius: 10px;
            min-width: 50px;
            min-height: 50px;
            margin: 8px;

            grid-column: span 2;
            grid-row: span 3;
        }

        .direita-cima {
            background-color: #352acc;
            border-radius: 10px;
            min-width: 50px;
            min-height: 50px;
            margin: 8px;

            grid-column: span 1;
            grid-row: span 1;

        }

        .direita-baixo {
            background-color: #cc2a96;
            border-radius: 10px;
            min-width: 50px;
            min-height: 50px;
            margin: 8px;


            grid-column: span 1;
            grid-row: span 2;  
        }

        .cabecalho:hover {
            background-color: #de2c2c;
        }

        .lateral:hover {
            background-color: #4ae02c;
        }

        .meio:hover {
            background-color: #2bafd7;
        }

        .direita-cima:hover { 
            background-color: #271ae0;
        }

        .direita-baixo:hover {  
            background-color: #d8259d;  
        }


</style>






<title>Document</title>
<body class="corpo">
    <header class="cabecalho"></header>
    <nav class="lateral"></nav>
    <section class="meio"></section>
    <section class="direita-cima"></section>
    <section class="direita-baixo"></section>
</body>