Changing number of divs in row and divs are showing instead of display is hidden

I have two ‘options’ divs, first block is main divs and they are showed when page is loaded, and also I have sub divs that need to be hidden on page load, I created a function that hide them but I still can see them on page for about a second and than they are hidden, how to solve this so I dont see them at all when page load. And also, how to create so in row I have 4 divs, because I have 8 main divs so I want to have 4 in row.

Example code with HTML and JavaScript that hide sub divs.

HTML

<div class=”row”>

<!–main divs–>
<div style=”background-color: #4cc9f0″ class=”item a” id=”adventureHolidays”><p>Adventure Holidays</p></div>
<div style=”background-color: #4895ef” class=”item b” id=”backpacking”><p>Backpacking</p></div>
<div style=”background-color: #4361ee” class=”item c” id=”cruiseHolidays”><p>Cruise Holidays</p></div>
<div style=”background-color: #4361ee” class=”item d” id=”eventTravel”><p>Event Travel</p>
</div>
<div style=”background-color: #3a0ca3″ class=”item e” id=”packageHoliday”><p>Package Holiday</p></div>
<div style=”background-color: #480ca8″ class=”item f” id=”safari”><p>Safari</p></div>
<div style=”background-color: #560bad” class=”item g” id=”skiingAndSnowboarding”><p>Skiing and Snowboarding</p>
</div>
<div style=”background-color: #7209b7″ class=”item h” id=”volunteering”><p>Volunteering</p></div>

<!–end on main divs–>

<!–sub divs this is hidden on page load but I can see them for about a second on page load and then dissaper–>

<div style=”background-color: #4cc9f0″ class=”column” id=”aH-summerCamps”><p>Summer camps</p></div>
<div style=”background-color: #4895ef” class=”column” id=”aH-trekking”><p>Trekking</p></div>
<div style=”background-color: #4361ee” class=”column” id=”bP-longDistanceHiking”><p>Long Distance Hiking</p></div>
<div style=”background-color: #4361ee” class=”column” id=”bP-thruHiking”><p>Thru Hiking</p></div>
<div style=”background-color: #3a0ca3″ class=”column” id=”c-oceanCruising”><p>Ocean Cruising</p></div>
<div style=”background-color: #480ca8″ class=”column” id=”c-riverCruising”><p>River Cruising</p></div>
<div style=”background-color: #560bad” class=”column” id=”e-recreationsEvent”><p>Recreations Events</p></div>
<div style=”background-color: #7209b7″ class=”column” id=”e-sportsEvents”><p>Sports events</p></div>
<div style=”background-color: #4cc9f0″ class=”column” id=”pH-escortedTours”><p>Escorted Tours</p></div>
<div style=”background-color: #4895ef” class=”column” id=”pH-independentTours”><p>Independent Tours</p></div>
<div style=”background-color: #4361ee” class=”column” id=”s-photographicSafari”><p>Photographic Safari</p></div>
<div style=”background-color: #4895ef” class=”column” id=”s-cyclingSafari”><p>Cycling Safari</p></div>
<div style=”background-color: #3a0ca3″ class=”column” id=”sAs-backcountrySkiing”><p>Backcountry skiing</p></div>
<div style=”background-color: #560bad” class=”column” id=”sAs-downhillSkiing”><p>Downhill skiing</p></div>
<div style=”background-color: #4361ee” class=”column” id=”v-childcare”><p>Childcare</p></div>
<div style=”background-color: #4895ef” class=”column” id=”v-conservationAndEnvironment”><p>Conservation And
Environment</p></div>

</div>

CSS

body {
margin: 10px;
text-align: center;
width: 380px;
}

.row {
display: grid;
grid-template-columns: 180px 180px 180px;
grid-gap: 10px;
}

.item {
color: white;
padding: 1.5em 0;
font-size: 2em;
}

.a {
background: #0d9;
}

.b {
background: #d90;
}

.c {
background: #9d0;
}

.d {
background: #90d;
}

.e {
background: #d09;
}

.f {
background: #09d;
}

.g {
background: #09d;
}

.h {
background: #09d;

}

And function that hides sub divs, I said it, its work fine and function hide them on page load but I can see them for about a second when page is loaded.

JS

const subDivs = [“aH-summerCamps”, “aH-trekking”, “bP-longDistanceHiking”, “bP-thruHiking”, “c-oceanCruising”, “c-riverCruising”, “e-recreationsEvent”, “e-sportsEvents”, “pH-escortedTours”, “pH-independentTours”, “s-photographicSafari”, “s-cyclingSafari”, “sAs-backcountrySkiing”, “v-conservationAndEnvironment”, “sAs-downhillSkiing”, “v-childcare”]
.map(id => document.getElementById(id));

function hideAllSubDivs(id) {
for (const div of subDivs) div.hidden = !(div.id === id);
}

window.onload = function () {
hideAllSubDivs(subDivs);
};