Блог

Главная - Вопросы по программированию - Сделайте сеточную систему отзывчивой (одна слева и две справа).

Сделайте сеточную систему отзывчивой (одна слева и две справа).

#html #css #grid #responsive

Вопрос:

Я получил эту сеточную систему из своего предыдущего вопроса, на который ответил Энди Хоффман. Вот сетевая система:

 #showroom {
    display: grid;
    gap: 1rem;
    height: 250px;
}

#boxOne {
    grid-column: 1;
    grid-row: 1 / 3;
}

#boxTwo {
    grid-column: 2;
    grid-row: 1 / 2;
}

#boxThree {
    grid-column: 2;
    grid-row: 2 / 3;
}

#showroom > * {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
} 
 <div id="showroom">
    <div id="boxOne"></div>
    <div id="boxTwo"></div>
    <div id="boxThree"></div>
</div>

Мой вопрос будет заключаться в том, как сделать эту сеточную систему отзывчивой с разрешением менее 750 пикселей ( @media screen and (max-width: 750px){} ). Это должно выглядеть так в адаптивной версии:

Возможно ли это с помощью этой сетевой системы?

Ответ №1:

В запросе мультимедиа сбросьте правила grid-column и grid-row установите параметр revert .

Ключевое revert слово CSS возвращает каскадное значение свойства из его текущего значения в значение, которое было бы у свойства, если бы источник текущего стиля не изменил текущий элемент. Таким образом, он сбрасывает свойство до унаследованного значения, если оно наследуется от своего родителя, или до значения по умолчанию, установленного таблицей стилей агента пользователя (или пользовательскими стилями, если таковые существуют).

 #showroom {
    display: grid;
    gap: 1rem;
    height: 250px;
}

#boxOne {
    grid-column: 1;
    grid-row: 1 / 3;
}

#boxTwo {
    grid-column: 2;
    grid-row: 1 / 2;
}

#boxThree {
    grid-column: 2;
    grid-row: 2 / 3;
}

#showroom > * {
    background-color: #444;
    padding: 20px;
    border-radius: 5px;
}

@media (max-width: 750px) {
    #boxOne,
    #boxTwo,
    #boxThree {
        grid-column: revert;
        grid-row: revert;
    }
} 
 <div id="showroom">
    <div id="boxOne"></div>
    <div id="boxTwo"></div>
    <div id="boxThree"></div>
</div>
Метки: