Grid - Width columns - Css

Question

I have a 100% grid with 4 columns. In some sizes I want it to be 3. I tried to change CSS so that the width would be 25% And a minimum of 33.33% in a certain range of screen size using CSS. In Grid I made CSS of

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

But it is presented in such a way:

1   2   3 
4
5   6   7
8

I want a certain screen size range, It will be responsive and will be this way:

100% = 1  2  3  4  
       5  6  7  8

in some screen size:

1  2  3 
4  5  6
7  8

I work in Elementor and the two lines are separate If it changes anything Any help?

Answer 1

Just use grid here and don't use % instead use fr unit.

If you need 4 columns

grid-template-columns: repeat(4, 1fr); // 4 columns

else if you need 3 columns

grid-template-columns: repeat(3, 1fr); // 3 columns

Just resize browser and see the difference

.grid-container {
  margin: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr); // 4 columns
  grid-gap: 1rem;
}

.grid-items {
  background-color: brown;
  height: 100px;
  color: white;
}

@media only screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr); // 3 columns
  }
}

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