По -настоящему отзывчивый столбец контента с боковой панелью без медиа -запросов ⇐ CSS

[Anonymous]

Я пытаюсь сделать отзывчивый базовый макет с контентом (который имеет 3 столбца) и боковой панели. Текущая проблема, с которой у меня есть, - это определение маржи, когда боковая панель находится на правой стороне и когда боковая панель идет под сеткой. В настоящее время у меня нет разницы, но я хотел бы иметь запас 20 % (например), когда боковая панель находится на правой стороне, и 50px, когда боковая панель находится под сеткой (или 20px, так что это то же самое). Также .sidebar должен быть полной шириной, когда на новой строке. Вот мой код: < /p>

Код: Выделить всё

    






.main {
display: flex;
flex-wrap: wrap;
width: 100%;
background: yellow;
}
.main .six-col {
flex: 1 1 auto;
display: grid;
justify-content: space-between;
column-gap: 15px;
background: red;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.main .six-col .col { border: 1px white solid;}
.main .sidebar {
flex: 0 0 250px;
background: green;
}



asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad
asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad
asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad
asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad
asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad
asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad


sidebar

Можно ли это получить без медиа -запросов?

Подробнее здесь: https://stackoverflow.com/questions/598 ... ia-queries