Вот такая несложная раскладка на гридах: https://jsfiddle.net/xwu2gqLj/35/
#wrapper {
display: grid;
grid-template-columns: 2fr 3fr;
grid-template-areas: "header header" "left main" "right main" "footer footer"
}
.header {
background: gold;
grid-area: header;
}
.left {
background: silver;
grid-area: left;
}
.main {
background: blue;
grid-area: main;
}
.right {
background: green;
grid-area: right;
}
.footer {
background: red;
grid-area: footer;
}
<div id="wrapper">
<header class="header">Header</header>
<aside class="left">Вот этот грид-элемент должен тянуться (в высоту) по контенту, а не по высоте .main ... </aside>
<main class="main">Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели
развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров способствует подготовки и реализации дальнейших направлений развития. Товарищи! укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие
в формировании систем массового участия. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий. Не следует,
однако забывать, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки форм развития. Повседневная практика показывает, что консультация с широким активом требуют определения и уточнения систем
массового участия. Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров влечет за собой процесс внедрения и модернизации направлений
прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых заданий требуют определения и уточнения систем массового участия. Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения
и модернизации дальнейших направлений развития. Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров способствует
подготовки и реализации дальнейших направлений развития. Товарищи! укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Значимость этих проблем настолько очевидна, что рамки и
место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности представляет собой
интересный эксперимент проверки форм развития. Повседневная практика показывает, что консультация с широким активом требуют определения и уточнения систем массового участия. Товарищи! рамки и место обучения кадров требуют от нас анализа существенных
финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых
заданий требуют определения и уточнения систем массового участия.</main>
<aside class="right">...а этот грид-элемент, как следствие должен начинаться сразу после .left</aside>
<footer class="footer">Footer</footer>
</div>
Для понимания: блоки .left и .right являются боковыми панельками, которые в определенном брейкпоинте должны сложиться в одну панель слева (в примере media queries убраны, для облегчения понимания). В примере так и происходит, НО! Высота блока .left и блока .right растягиваются по контенту блока .main. Соответственно, при большом кол-ве контента в блоке .main, непрерывная панель из .left и .right уже не получается.
Вопрос: как заставить боковые панели тянуться в высоту по собственному контенту, а не по высоте .main?
Заранее благодарен.
Переписал с grid-template-areas на чуть более управляемый синтаксис.
#wrapper {
display: grid;
grid-template-columns: 2fr 3fr;
}
.header {
background: gold;
grid-column: 1 / -1;
}
.left {
background: silver;
grid-column: 1;
grid-row: 2;
}
.main {
background: blue;
grid-column: 2;
grid-row: 2 / 5;
}
.right {
background: green;
grid-column: 1;
grid-row: 3;
}
.footer {
background: red;
grid-column: 1 / -1;
}
<div id="wrapper">
<header class="header">Header</header>
<aside class="left">Вот этот грид-элемент должен тянуться (в высоту) по контенту, а не по высоте .main ... </aside>
<main class="main">Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели
развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров способствует подготовки и реализации дальнейших направлений развития. Товарищи! укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие
в формировании систем массового участия. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий. Не следует,
однако забывать, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки форм развития. Повседневная практика показывает, что консультация с широким активом требуют определения и уточнения систем
массового участия. Товарищи! рамки и место обучения кадров требуют от нас анализа существенных финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров влечет за собой процесс внедрения и модернизации направлений
прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых заданий требуют определения и уточнения систем массового участия. Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения
и модернизации дальнейших направлений развития. Таким образом реализация намеченных плановых заданий представляет собой интересный эксперимент проверки модели развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров способствует
подготовки и реализации дальнейших направлений развития. Товарищи! укрепление и развитие структуры обеспечивает широкому кругу (специалистов) участие в формировании систем массового участия. Значимость этих проблем настолько очевидна, что рамки и
место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании существенных финансовых и административных условий. Не следует, однако забывать, что постоянный количественный рост и сфера нашей активности представляет собой
интересный эксперимент проверки форм развития. Повседневная практика показывает, что консультация с широким активом требуют определения и уточнения систем массового участия. Товарищи! рамки и место обучения кадров требуют от нас анализа существенных
финансовых и административных условий. Разнообразный и богатый опыт рамки и место обучения кадров влечет за собой процесс внедрения и модернизации направлений прогрессивного развития. Задача организации, в особенности же реализация намеченных плановых
заданий требуют определения и уточнения систем массового участия.</main>
<aside class="right">...а этот грид-элемент, как следствие должен начинаться сразу после .left</aside>
<footer class="footer">Footer</footer>
</div>
Читайте и изучайте https://gridbyexample.com, там есть ответы на очень большое количество вопросов по построению раскладок с гридами. И не забывайте в девелопер-тулс тыкать в значения и менять их, отслеживая эффект — лучший способ научиться :)
Сборка персонального компьютера от Artline: умный выбор для современных пользователей