Target the last row in a grid-template-column

Question

I have uneven elements within a grid. essentially there are 7 items, on mobile they split into 2 columns

I've used the below code in css to do such case

        .icons {
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            justify-items: center;
        }

The outcomes becomes

|1||2||3||4|

|5||6||7|

How do I get the bottom row to span the size over the div width? essentially making the columns 33% long each

My html

        <div class="icons">
            <img src="icon1" alt="1">
            <img src="icon2" alt="2">
            <img src="icon3" alt="3">
            <img src="icon4" alt="4">
            <img src="icon5" alt="5">
            <img src="icon6" alt="6">
            <img src="icon7" alt="7">
        </div>