Как заставить грид-элемент тянуться по собственному контенту?

192
10 августа 2018, 02:30

Вот такая несложная раскладка на гридах: 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?

Заранее благодарен.

Answer 1

Переписал с 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, там есть ответы на очень большое количество вопросов по построению раскладок с гридами. И не забывайте в девелопер-тулс тыкать в значения и менять их, отслеживая эффект — лучший способ научиться :)

READ ALSO
Как сделать такие углы?

Как сделать такие углы?

Возможно ли сделать такие углы у div с помощью css?

171
Body:hover и z-index двух блоков?

Body:hover и z-index двух блоков?

blc1=z-index: 2; blc2=z-index: 1; Как при наведении курсора на body сменить z-index? blc1=z-index: 1; blc2=z-index: 2;

190
не могу подключить svg иконку

не могу подключить svg иконку

Что не так, почему не отображается иконка svg?

242