CSS Grid Show items on at twice

Question

please, I have a small problem with my CSS Grid positioning. I have four columns with auto-fit property. No problem if I have monitor bigger than 1376px in width for example (also not problem in mobile devices because then I'm showing only one item per row - different pixel ration as you know). But I have problem with monitor which has 1024px width e.g. Then I show 3 items and in second row I have just last one item which is looking very bad.

HML Snippet

<div class="content">
    <div class="grid-box"> 
        <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
        <h2>Wash your hands</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
        <h2>Cover your face</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
        <h2>Social distance</h2>
    </div>
    <div class="grid-box">
        <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
        <h2>Sanitize common items</h2>
    </div>
</div>

And my css snippet

.content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    min-height: calc(50vh - 20pt);
}

.grid-box {
    margin: 10pt;
    padding: 20pt 10pt 0pt 20pt;
    text-align: center;
    background-color: rgba($color: #ccddcc, $alpha: 0.6);
    border-radius: 30px;
    border: 1px solid black;
}

My desired result is show it only in as twins. Not 3 items in first column and last in second. Only all 4 items in one row or if monitor is smaller than 2 items on first row and 2 items on second row.

It is possible please without using media-query in css? Yes. I know that it's possible via media-query but I believe that CSS Grid is smart to solve it without using this. Thanks.

Answer 1

You can group two grid-box together inside another div and get the desired output. `

<div class="content">
    <div class="content">
        <div class="grid-box"> 
            <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>
            <h2>Wash your hands</h2>
        </div>
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>
            <h2>Cover your face</h2>
        </div>
      </div>
      <div class="content">
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>
            <h2>Social distance</h2>
        </div>
        <div class="grid-box">
            <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>
            <h2>Sanitize common items</h2>
      </div>
    </div>
</div>

`