CSS grid-column-start根据屏幕尺寸开始制作全宽度

Question

我正在开发一个网站，并且我要接管前端部分，但是我不是一个前端开发人员。我正在创建我的网格系统。

这是我的CSS。

.form-row {
        margin-top: 25px;
    }
    
    .margin-top-10px {
        margin-top: 10px;
    }
    
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
    }
    
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
    }
    
    .item-1-2 {
        grid-column-start: 1;
        grid-column-end: 2;
    }
    
    .item-2-4 {
        grid-column-start: 2;
        grid-column-end: 4;
    }
    
    .item-2-6 {
        grid-column-start: 2;
        grid-column-end: 6;
    }
    
    .item-1-3 {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    .item-3-5 {
        grid-column-start: 3;
        grid-column-end: 5;
    }
    
    .form-label {
        min-width: 180px;
    }
    
    
    @media only screen and (max-width: 500px) {
        .grid-container > div {
            
        }
    }

    <div class="form-row">
            <div class="grid-container">
                <div class="item-1-2">
                    <div class="form-label">
                        <label>EMAIL ADDRESS <span class="mandatory">*</span></label>
                    </div>
                </div>
                <div class="item-2-6">
                    <div>
                        <input />
                    </div>
                </div>
            </div>
        </div>

在宽度大于500像素的屏幕上，由于我应用了以下类label和input，因此可以并排呈现item-1-2和item-2-6控件。但是我想做的是，当屏幕为500px或更低时，我想删除那些grid-column-start和grid-column-end。我只希望div是普通的块元素。我该怎么办？

我尝试过这个。

.item-1-3 {
    grid-column-start: unset;
    grid-column-end: unset;
}

它不起作用。