如何在顺风中获取和扩展最后一个网格

Posted

技术标签:

【中文标题】如何在顺风中获取和扩展最后一个网格【英文标题】:how get and expand last grid in tailwind 【发布时间】:2022-01-17 05:00:54 【问题描述】:

大家好,如何获取最后一个网格,我不知道获取图像的数量可以超过 3 个,至少 5 个,我想使用 tailwind css 使最后一个网格图像充满

<div class="grid grid-cols-2 gap-2 mx-auto">
                @foreach ( $post->images as $image )
                <div class="w-full">
                    <img src=" asset('/storage/' . $image->filename) "  class="w-full rounded-md h-36">
                </div>

                @endforeach
            </div>

【问题讨论】:

【参考方案1】:

Laravel 在 Blade 中有一个 $loop 变量。

<div class="grid grid-cols-2 gap-2 mx-auto">
    @foreach ( $post->images as $image )
    <div class="@if ($loop->last) w-full @endif">
        <img src=" asset('/storage/' . $image->filename) "  class="w-full rounded-md h-36">
    </div>
    @endforeach
</div>

【讨论】:

那行不通 你能详细说明一下id"did not work"吗?

以上是关于如何在顺风中获取和扩展最后一个网格的主要内容,如果未能解决你的问题,请参考以下文章

如何使用顺风使 CSS 网格项具有自动高度?

如何在网格列标题上获取可扩展按钮

如何在顺风中创建这种复杂的布局?

顺风网格布局

如何定位动态条目网格行中的第一项和最后一项?

如何在 JavaScript 中获得顺风活动断点?