在我的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，所以也許這會有所幫助？
uj5u.com熱心網友回復：
當元素是第一個子元素時，使用“first”修飾符設定元素的樣式：
在您的第一個索引的代碼使用條件（我假設它是 1）并使用樣式中，我想您知道條件實作我只是提到了樣式用法-
<article-card first:your-style />
有關更多資訊，請參閱官方的順風 CSS 檔案。第一個、最后一個、奇數和偶數
還有一個我從 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>
uj5u.com熱心網友回復：
如果您使用的是 Tailwind v3，那么您可以使用任意值功能，例如：
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px]">
<!-- ... -->
</div>
所以只需將值包裝在方括號中[...]并使用_而不是空格。
檔案中的更多資訊一如既往
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/415978.html
標籤：