How to make the grid element drag on its own content?

Question

Here's a simple layout on grids: 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>

For understanding: the .left and .right are side panels that, in a certain breakpoint, should be folded into one panel on the left (in the example, media queries are removed, for easier understanding). In the example this is the case, BUT! The height of the .left block and the .right block .right stretched across the content of the .main block. Accordingly, with a large number of content in the .main block, a continuous panel of .left and .right no longer .right . Question: how to make the side panels reach in height for their own content, and not for height .main ?

Thanks in advance.

if I knew more specifically, I would write the answer, not a comment
@Renton, I understand you need something like a masonry - mesh.

Answer 1 · 2018-07-31T10:27:21

Rewrote from grid-template-areas to a slightly more manageable syntax.

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

Read and study https://gridbyexample.com , there are answers to a very large number of questions on building layouts with grids. And do not forget to poke into the values of the developer-values and change them, tracking the effect is the best way to learn :)

How to make the grid element drag on its own content?

1 answer 1

More articles: