Dúvida projeto

Estou fazendo um projeto, um formulário e gostaria de quebrá-lo em 3 colunas e 2 linhas, porém, não estou conseguindo, alguém poderia me ajudar?

Segue o código

*{ box-sizing: border-box; }

body { background-color:#eee; font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-size: 14px; }

h1 { color:#00AFF0; padding-top: 2rem; font-size: 2.2em; text-align: center;}

.titulo { text-align: center;

}

.grupo{ width: 25%; padding: 10px 0px; grid-area: grupo; }

.principal { display: grid; grid-template-areas: "grupo"; grid-template-columns: auto auto auto auto; grid-template-rows: 50px 100vh auto; }

e HTML

`

    <div class="container">
        <h1 class ="titulo">Customer Experience Diretoria de Infraestrutura</h1>
    </div>

    <form id="form-add">
    <!--ver video CRUD Indexdedb para virar automático--> 

        <div class="grupo">
            <label for="numid">ID:</label>
            <input id="numid" name="numid" type="text" placeholder="digite a ID" class="campo">
        </div>

        <div class="grupo">
            <label for="data-rec">Data de Recebimento:</label>
            <input id="data-rec" name="data-rec" type="date" placeholder="digite DD/MM/AAAA " class="campo campo-medio">
        </div>

        <div class="grupo">
            <label for="data-reg">Data de Registro:</label>
            <input id="data-reg" name="data-reg" type="date" placeholder="digite DD/MM/AAAA " class="campo campo-medio">
        </div>

        <div class="grupo">
            <label for="tipo">Tipo:</label>
            <select name="tipo" id="tipo">
                <option> </option>
                <option>Elogio</option>
                <option>Reclamação</option>
                <option>Solicitação</option>
                <option>Sugestão</option>
            </select>
        </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--fim do bootstrap-->