如何使用Vue构建动态CSS Grid布局组件？

嘿，这就帮你搞定这个需求！咱们要做的是两个可复用的Vue组件并排平分屏幕，每个组件内部是动态生成的时间-内容行式网格，完全用CSS Grid来控制布局，和你提到的纯HTML/CSS效果完全一致。

1. 先定义可复用的子组件 #

咱们先写一个叫TimelineCard的子组件，它负责渲染动态的时间-内容行，内部用CSS Grid来规整每一行的时间和内容：

<template>
  <div class="timeline-card">
    <div class="timeline-row" v-for="(item, index) in items" :key="index">
      <span class="timeline-time">{{ item.time }}</span>
      <span class="timeline-content">{{ item.content }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TimelineCard',
  props: {
    // 接收时间-内容数组，每个元素包含time和content字段
    items: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(item => item.time && item.content)
      }
    }
  }
}
</script>

<style scoped>
.timeline-card {
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
}

.timeline-row {
  /* 子组件内部的行式网格：时间列自适应宽度，内容列占剩余空间 */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
  align-items: center;
}

.timeline-time {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.timeline-content {
  color: #555;
  line-height: 1.4;
}
</style>

2. 父组件布局：两个组件并排平分屏幕 #

接下来在父组件里，我们用CSS Grid来控制两个TimelineCard的排列，让它们自动平分屏幕宽度：

<template>
  <div class="parent-container">
    <!-- 第一个复用组件 -->
    <TimelineCard :items="firstCardItems" />
    <!-- 第二个复用组件 -->
    <TimelineCard :items="secondCardItems" />
  </div>
</template>

<script>
import TimelineCard from './TimelineCard.vue'

export default {
  components: {
    TimelineCard
  },
  data() {
    return {
      firstCardItems: [
        { time: '09:00', content: '团队站会' },
        { time: '10:30', content: '项目需求评审' },
        { time: '14:00', content: '前端技术分享' }
      ],
      secondCardItems: [
        { time: '08:30', content: '每日任务梳理' },
        { time: '11:00', content: 'UI设计稿对接' },
        { time: '15:30', content: '版本发布准备' }
      ]
    }
  }
}
</script>

<style>
.parent-container {
  /* 父容器用Grid平分宽度，两个列各占1份 */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式适配：屏幕较小时自动堆叠组件 */
@media (max-width: 768px) {
  .parent-container {
    grid-template-columns: 1fr;
  }
}
</style>

效果说明 #

• 父容器的grid-template-columns: 1fr 1fr会自动把可用宽度分成相等的两份，两个组件各占一份，完美实现平分屏幕；
• 子组件内部的grid-template-columns: auto 1fr让每一行的时间列只占自身内容宽度，内容列填充剩余空间，保证时间和内容的对齐效果；
• 组件完全可复用，你只需要传入不同的items数组，就能快速渲染不同的时间-内容对；
• 额外加了响应式适配，屏幕宽度小于768px时，两个组件会自动垂直堆叠，提升移动端的使用体验。

这个方案和你说的纯HTML/CSS实现效果一致，同时利用Vue的动态渲染能力，让组件可以灵活复用~

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