CSS, GRID, trying keep grid size 3x3 while overflow scrolling the extra-CodePudding

I want the grid to be no bigger than 3X3 and then scroll the rest.... Looks great for 9 boxes and less lol!!

This is the look I like but I'm only deriving with 9 boxes or less: Wanted

However anything other than 9 gives me this: not wanted

column-count: 3: not wanted

.container{
    height: 70vh;
    width: 80vw;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}

.container::-webkit-scrollbar {
    display: none;
}

.box{
    margin: 2%;
    background-color: blueviolet;
}

html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>Routing