CSS Tailwind如何定位css网格的第一行答案

【问题标题】：CSS Tailwind How to target first row of css gridCSS Tailwind如何定位css网格的第一行
【发布时间】：2022-01-19 21:08:52
【问题描述】：

在我的vue-app 我正在做这个循环

<div class="grid grid-cols-3 gap-14">
   <article-card v-for="(article, index) in articles" :key="index" :content="article" />
</div>

到目前为止一切顺利，但我想以不同方式显示css-grid 的第一行 -> 例如grid-template-columns: 1fr 2fr 1.5fr; 之类的东西 - 只是为了让它们更明显

我该怎么做？有人可以帮我吗？我正在使用tailwindcss，所以也许这会有所帮助？

【问题讨论】：

标签： css vue.js tailwind-css

【解决方案1】：

使用 "first" 修饰符为第一个子元素设置样式：

在你的代码中第一个索引使用条件（我假设为1）并使用样式，我想你知道条件实现我只是提到了样式用法-

 <article-card  first:your-style />

有关更多信息，请参阅官方的 tailwind CSS 文档。 First, last, odd, and even

还有一个我从 Tailwind CSS 获得的代码示例，可能会对您有所帮助。

<ul role="list" class="p-6 divide-y divide-slate-200">
   {#each people as person}
      <!-- Remove top/bottom padding when first/last child -->
      <li class="flex py-4 first:pt-0 last:pb-0">
         <img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
         <div class="ml-3 overflow-hidden">
            <p class="text-sm font-medium text-slate-900">{person.name}</p>
            <p class="text-sm text-slate-500 truncate">{person.email}</p>
         </div>
      </li>
   {/each}
</ul>

【讨论】：

【解决方案2】：

如果您使用的是 Tailwind v3，那么您可以使用任意值功能，例如：

<div class="grid-cols-[200px_minmax(900px,_1fr)_100px]">
  <!-- ... -->
</div>

所以只需将值括在方括号 [...] 中，并使用 _ 而不是空格。

More info in the docs as always

【讨论】：