好问题！首先得明确核心结论：CSS本身不支持通过子元素的状态来修改父元素的样式——因为CSS的选择器是单向的，只能从父节点往子节点遍历，没法反过来从子节点触发父节点的样式变化。

为什么你当前的代码不生效？ #

你写的@keyframes expand-card里的grid-template-columns，其实是作用在.lg-card-animation这个子元素上的，而不是它的父元素.header-grid，所以父元素的网格布局根本不会有变化。

结合Vue.js的解决方案 #

既然你在用Vue，我们可以利用Vue的响应式事件监听来实现需求，完美弥补CSS的局限：

1. 在Vue组件中添加状态与方法

export default {
  data() {
    return {
      // 初始化网格布局比例
      gridColumns: '50% 50%',
      headerImages: [/* 你的图片数据 */]
    }
  },
  methods: {
    // 鼠标悬停时修改父元素网格比例
    expandGrid() {
      this.gridColumns = '55% 45%'
    },
    // 鼠标离开时恢复初始比例
    resetGrid() {
      this.gridColumns = '50% 50%'
    }
  }
}

2. 修改模板绑定事件与样式

<header class="header-grid" :style="{ 'grid-template-columns': gridColumns }">
  <div 
    class="full-height full-width background-fix lg-card-animation" 
    :style="{ 'background-image': 'url(' + headerImages[0].image + ')' }"
    @mouseenter="expandGrid"
    @mouseleave="resetGrid"
  >
    <h1 class="header-text">{{ headerImages[0].name }}</h1>
  </div>
  <div class="header-row-grid">
    <div class="full-height full-width background-fix" :style="{ 'background-image': 'url(' + headerImages[1].image + ')' }">
      <h1 class="header-text">{{ headerImages[1].name }}</h1>
    </div>
    <div class="full-height full-width background-fix" :style="{ 'background-image': 'url(' + headerImages[2].image + ')' }">
      <h1 class="header-text">{{ headerImages[2].name }}</h1>
    </div>
  </div>
</header>

3. 优化Sass添加平滑过渡

如果需要像动画一样的平滑效果，给父元素加上过渡属性即可：

.header-grid
  height: 100vh
  display: grid
  grid-template-columns: 50% 50%
  /* 添加过渡动画，和你之前设置的1000ms保持一致 */
  transition: grid-template-columns 1000ms ease;

.lg-card-animation:hover
  /* 这里可以保留卡片自身的hover样式（比如阴影、透明度） */

原理说明 #

通过Vue的@mouseenter和@mouseleave监听子元素的鼠标状态，动态修改父元素绑定的grid-template-columns样式，利用Vue的响应式系统实现了“子元素状态影响父元素”的效果，这是纯CSS做不到的。

内容的提问来源于stack exchange，提问作者ItzAmmar