Как сделать css grid с разным размером строк?

Question

[Андрей]

Столкнулся с проблемой при верстке гридами.
Имеется 4 столбца разной ширины. Каждый имеет в себе несколько вложенных дивов, разных по высоте.

Но если меняется высота одного из столбцов, следом за ним меняется высота остальных столбцов вместе с их свойствами (растягивается фон, увеличивается разрыв между ними и т.д.).

CSS:

.wrapper
  display: grid
  grid-template-columns: 15vw 70vw 15vw
  justify-items: center
  margin-top: 40px

.left-menu
  font-family: "Lato Light", sans-serif
  font-size: 16px

.left-menu-element
  height: 40px
  margin: 5px 0
  &:hover
    background-color: gray

.content
  grid-template-columns: 260px 840px
  grid-gap: 40px 50px

.content-left
  grid-template-columns: 260px
  grid-gap: 40px 40px

.content-left-box
  background-color: #fff
  box-shadow: 0 3px 12px rgba(0,0,0,0.08)
  width: 260px
  min-height: 150px
  padding: 30px 35px
  box-sizing: border-box

.content-right
  grid-template-columns: 840px
  grid-template-rows: auto
  grid-gap: 40px 40px

.content-right-box
  box-shadow: 0 3px 12px rgba(0,0,0,0.08)
  width: 840px
  height: 150px
  padding: 30px 35px
  box-sizing: border-box

.user-box
  background-color: #fff
  box-shadow: 0 3px 12px rgba(0,0,0,0.08)

.user-box-header
  width: 100%
  height: 130px
  background-color: #83C7CF

.user-box-avatar
  width: 120px
  height: 120px
  border-radius: 50%
  background-color: gray
  position: relative
  left: 70px
  top: -70px

.user-box-content
  text-align: center
  margin-top: -50px
  font-family: "Lato"
  font-size: 18px

HTML:

<div class="wrapper">

<div class="left-menu grid">
	<div class="left-menu-element">Left menu</div>
	<div class="left-menu-element">Left menu</div>
	<div class="left-menu-element">Left menu</div>
	<div class="left-menu-element">Left menu</div>
	<div class="left-menu-element">Left menu</div>
	<div class="left-menu-element">Left menu</div>
</div>

<div class="content grid">
<div class="content-left grid">

<div class="user-box">
	<div class="user-box-header"></div>
	<div class="user-box-avatar"></div>
	<div class="user-box-content">
	username<br> <br>
</div>
</div>
<div class="content-left-box">Content box</div>

</div>
<div class="content-right grid">

<div class="content-right-box">1</div>
<div class="content-right-box">2</div>
</div>
</div>

<div class="right-menu">
This is right menu
</div>
</div>

То есть я задал один общий wrapper, который делит страницу на три области, в каждую из которых добавил нужны мне столбцы. Строки я явно не указывал, так как их высота непредсказуема и зависит от контента, но, кажется, проблема именно в этом. Так как с гридами я работаю недавно, прошу помощи опытных верстальщиков. :)

Answer 1

[Николай Чуприк]

Я не придумал ничего лучшего, чем всунуть в левую колонку ещё один грид left-menu-wrapper из одной колонки и двух строк, а уже внутрь поместить меню left-menu.

.left-menu-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
}

<div class="left-menu-wrapper">
  <div class="left-menu grid">
    <div class="left-menu-element">Left menu</div>
    <div class="left-menu-element">Left menu</div>
    <div class="left-menu-element">Left menu</div>
    <div class="left-menu-element">Left menu</div>
    <div class="left-menu-element">Left menu</div>
    <div class="left-menu-element">Left menu</div>
  </div>
</div>