Example shown for Grid is not working practically

[sunil_pandya]

in CSS example of Grid is as under:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid black;
  text-align: center;
  font-size: 30px;
}

The above example's HTML shows as under:

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

If you prepare your HTML div and then display: grid, gap, will not work in your practical example

  

<div class="main">

<div class=1><p>Some Content</p>

<p>Some Contet</p>

</dv>

<div class=2>

<p>Some Content</p>

<p>Some Cotent</p>

</div>

</div>

Now if you use CSS Shown as per the example then any browsers will not catch the CSS shown in the example at all.

If you the user want to display two div side by side it will not display side by side at all.

that is it will not display as a grid, it will not catch the coloumn, nor your specified column width nor auto;

Please if somebody can post real life example

Sunil pandya