顺风 - 网格列不相邻

Question

 <div class="py-12">
      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">

           <div class="grid grid-cols-3 gap-2  grid-flow-col">
               <div class="col-span-2 p-6 bg-white border-b border-gray-200">
                   Col 1
               </div>
    
               <div class="bg-thite border-b border-gray-200 p-6">
                   Col 2
               </div>
           </div>

     </div>
</div>

这是我的标记，但是当我在浏览器上预览它时，我看到两个 div 元素都扩展了整个宽度和父元素以及 Col 1 下的 Col 2，如屏幕截图

这就是我的 app.css 中的内容

@tailwind base;
@tailwind components;
@tailwind utilities;

我正在尝试做你在 Tailwind 文档示例中看到的内容 https://tailwindcss.com/docs/grid-column#spanning-columns 对于 04 和 05 元素

任何想法可能是错的？