-2

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?

qwerty
  • 1
  • 3

2 Answers2

0

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>
decpk
  • 21,436
  • 4
  • 19
  • 37
  • I want it to be in percent. I have 2 sections one below the other, with the display on this computer being 4 columns. On smaller screens (larger than a tablet) it looks not good and I want 3 columns to be displayed. The width is set to about 25% and I tried using CSS to change the size to a minimum of 33.33% in the range I want, but it hides the fourth column in each row. I want 3 in each row to be displayed, within a certain screen size range. display: flex; flex-direction: row; flex-wrap: wrap; But it is presented in such a way: 1 2 3 4 5 6 7 8 – qwerty May 28 '21 at 06:30
  • like this https://jsfiddle.net/t7ku9c2q/ – qwerty May 28 '21 at 07:31
0

The characteristic isspace is generally implemented one of these manner that it uses its argument of the type int as an index in a table with 256 values data (from 0 to 255). If the argument of the kind int has a cost this is more than the most fee 255 or a poor value (and isn't same to the fee of the macro EOF) then the behavior of the characteristic is undefined.

GuitiaEar
  • 1
  • 1