html - 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>

label在宽度超过 500 像素的屏幕上，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;
}

这没用。

标签： htmlcss