Использование CSS-переходов в макете CSS-сетки

в качестве обходного пути, вы можете работать с размером элементов сетки, а не с grid-template-columns или grid-template-rows.

вы могли бы сделать:

grid-container {
  display: inline-grid;
  grid-template-columns: 100px 20vw 200px;
  background-color: black;
  height: 230px;
  transition: 2s;
  
  /* non-essential */
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
}

grid-container:hover {
  background-color: red;
  height: 130px;
}

grid-item {
  height: 100px;
  transition: height 2s;
  background-color: lightgreen;
}

grid-container:hover .first-row {
  height: 25px;
}

grid-container:hover .last-row {
  height: 75px;
}

<grid-container>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='first-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
  <grid-item class='last-row'></grid-item>
</grid-container>

вот еще один пример 2x2: https://codepen.io/erik127/pen/OvodQR

и вот более обширный пример, где вы можете добавить больше столбцов или строк:https://codepen.io/erik127/pen/rdZbxL

к сожалению, это много javascript, было бы неплохо, если grid-template-columns и grid-template-rows будет анимируются.

Другой альтернативой, которая может работать в некоторых случаях (если элементы сетки не охватывают несколько строк), является использование flexbox вместе с сеткой.

другой подход-использовать transform. На самом деле это может быть даже лучше, потому что преобразование вдоль W/ opacity может достичь 60fps, потому что это ускоренный GPU вместо ускоренного процессора (браузер должен делать меньше работы).

вот пример: https://codepen.io/oneezy/pen/YabaoR

.sides {
  display: grid;
  grid-template-columns: 50vw 50vw;
}

.monkey { animation: 0.7s monkey cubic-bezier(.86,0,.07,1) 0.4s both; }
.robot { animation: 0.7s robot cubic-bezier(.86,0,.07,1) 0.4s both; }

@keyframes monkey {
  0% { transform: translate(-50vw); }
  100% { transform: 0; }
}

@keyframes robot {
  0% { transform: translate(50vw); }
  100% { transform: 0; }
}

есть способ изменить размер элементов сетки при переходе, используя только CSS, но если вы хотите изменить его размер, вы должны использовать %правильно, но в ваших примерах проблема существует из-за липкой позиции. Вы должны добавить высоту на .head элемент, а затем изменить высоту после добавления .tiny класса. Здесь вы можете проверить, как я это исправил ( я думаю, это результат, который вы хотели иметь ):

Скрипка

Michael answer должен использовать % ' s в вашем примере поскольку прямо сейчас он имеет эффект "мигания" при наведении, если он будет изменен на значения из px на%, он будет отлично работать при изменении размера. Вот этот пример изменен на %С:

Скрипка

на данный момент переход на шаблон сетки не работает. Но вы можете использовать transform следующим образом:

jsFiddle

var button = document.querySelector("#btnToggle");
button.addEventListener("click",function(){
	var content = document.querySelector(".g-content");
  if(content.classList.contains("animate"))
    content.classList.remove("animate");
  else
	  content.classList.add("animate");
});

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}

.g-content{
  display:grid;
  height:100%;
  grid-template-columns: 200px 1fr;
  grid-template-rows:60px 1fr 30px;
  grid-template-areas: 
    "g-header g-header"
    "g-side g-main"
    "g-footer g-footer";
 overflow-x:hidden;
}

.g-header{
  grid-area:g-header;
  background:#2B4A6B;
  display:grid;
  grid-template-columns: max-content 1fr;
}

.g-header button{
  align-self:center;
  margin:0 5px;
}

.g-side{
  grid-area:g-side;
  background:#272B30;
  transition:all 0.5s;
}

.g-main{
  grid-area:g-main;
  background:#FFFFFA;
  transition:all 0.5s;
}

.g-footer{
  grid-area:g-footer;
  background:#7E827A
}

.animate .g-main{
  width:calc(100% + 200px);
  transform:translateX(-200px);
}

.animate .g-side{
  transform:translateX(-200px);
}  

<div class="g-content">
  <div class="g-header">
    <button id="btnToggle">
    Toggle
    </button>
  </div>
  <div class="g-side">
  </div>
  <div class="g-main">
  test
  </div>
  <div class="g-footer">
  </div>
</div>