使用Tailwind创建两列动态ul遇问题：仅显示单列求解决

你当前代码的核心问题是把v-for循环绑定在了grid容器上，这会导致每遍历一个topic就生成一个独立的grid grid-cols-2容器，每个容器里只有一个<ul>元素，自然只会显示单列布局。

修正方案 #

把grid容器作为外层只渲染一次，将v-for移到内部的网格项元素上（<ul>或<li>），让grid容器直接管理所有列元素：

示例1：每个topic作为单个网格项

<div class="grid grid-cols-2 gap-8">
  <!-- v-for移到li上，每个li是一个网格列 -->
  <li v-for="topic in course?.course_details.topics" :key="topic">
    {{ topic }}
  </li>
</div>

示例2：每个topic作为一个列表组

如果每个topic包含子内容，需要用<ul>包裹：

<div class="grid grid-cols-2 gap-8">
  <!-- v-for移到ul上，每个ul是一个网格列 -->
  <ul v-for="topic in course?.course_details.topics" :key="topic">
    <li>{{ topic }}</li>
    <!-- 可添加子列表项 -->
  </ul>
</div>

额外说明 #

• row-span-3是用来指定单个网格项跨3行，不是设置容器的固定行数。如果需要固定容器行数，应该用grid-rows-3（结合overflow-auto处理溢出内容）。
• 必须给v-for添加:key属性，这是Vue的强制要求，也能避免渲染异常。

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