Tailwind CSS 网格间距混乱

Question

我正在尝试为 post 制作一个包含两栏的博客网站。第一列显示一个大格式 post，而第二列显示 3 个小格式 post（如下图所示）。但是，当我对小格式执行此操作时，post 似乎尊重大格式 post 的间距，即使它们位于不同的列中。这是一张图片：

如您所见，我希望右侧的 post 间隔均匀，但第二个 post 从大格式 post 的末尾开始在第一列。

这是我的代码：

import React, { useEffect, useState } from 'react'
import client from '../client'
import BlockContent from '@sanity/block-content-to-react'
import { Link } from 'react-router-dom'

function Main() {
    const [posts, setPosts] = useState([])

    useEffect(() => {
        client.fetch(
            `*[_type == "post"] {
                title,
                slug,
                body,
                author,
                mainImage {
                    asset -> {
                        _id,
                        url
                    },
                    alt
                },
                publishedAt
            }`
        ).then((data) => setPosts(data))
         .catch(console.error)
    }, [])

    return (
        <div className='grid lg:grid-cols-3 md:grid-cols-2 gap-8 m-4 '>
            {posts.slice(0, 1).map((p, i) => (
                <Link to = {`/blog/${p.slug.current}`} className=''>
                    <article key = {p.slug.current} className=''>
                        <img src = {p.mainImage.asset.url} alt = {p.title} className='' />
                        <div>
                            <p className='font-bold text-xl text-secondary'>{p.title}</p>
                            <p className='text-sm'>By Brandon Pyle | {new Date(p.publishedAt).toLocaleDateString()}</p>
                        </div>
                    </article>
                </Link>
            ))}
            {posts.slice(1, 4).map((p, i) => (
                <Link to = {`/blog/${p.slug.current}`} className='col-start-2 h-16'>
                    <article key = {p.slug.current} className='flex'>
                        <img src = {p.mainImage.asset.url} alt = {p.title} className='w-auto h-auto max-h-[80px]' />
                        <div>
                            <p className='font-bold text-xl text-secondary'>{p.title}</p>
                            <p className='text-sm'>By Brandon Pyle | {new Date(p.publishedAt).toLocaleDateString()}</p>
                        </div>
                    </article>
                </Link>
            ))}
        </div>
    )
}

export default Main

如果您对如何解决此问题有任何想法，请告诉我！谢谢

Answer 1

尝试使用此代码构建您想要的大小的列网格列-[80px_400px_1fr_250px]=网格列-[first_second_therd] 并检查这个

Answer 2

我知道是什么导致了这个问题。我所要做的就是将每个地图函数包装在 div 中，如下所示：

import React, { useEffect, useState } from 'react'
import client from '../client'
import BlockContent from '@sanity/block-content-to-react'
import { Link } from 'react-router-dom'

function Main() {
    const [posts, setPosts] = useState([])

    useEffect(() => {
        client.fetch(
            `*[_type == "post"] {
                title,
                slug,
                body,
                author,
                mainImage {
                    asset -> {
                        _id,
                        url
                    },
                    alt
                },
                publishedAt
            }`
        ).then((data) => setPosts(data))
         .catch(console.error)
    }, [])

    return (
        <div className='grid lg:grid-cols-3 md:grid-cols-2 gap-8 m-4 '>
            <div>
                {posts.slice(0, 1).map((p, i) => (
                    <Link to = {`/blog/${p.slug.current}`} className=''>
                        <article key = {p.slug.current} className=''>
                            <img src = {p.mainImage.asset.url} alt = {p.title} className='' />
                            <div>
                                <p className='font-bold text-xl text-secondary'>{p.title}</p>
                                <p className='text-sm'>By Brandon Pyle | {new Date(p.publishedAt).toLocaleDateString()}</p>
                            </div>
                        </article>
                    </Link>
                ))}
            </div>

            <div className='my-[-16px]'>
                {posts.slice(1, 4).map((p, i) => (
                    <Link to = {`/blog/${p.slug.current}`} className='col-start-2'>
                        <article key = {p.slug.current} className='flex my-4'>
                            <img src = {p.mainImage.asset.url} alt = {p.title} className='w-auto h-auto max-h-[80px]' />
                            <div>
                                <p className='font-bold text-xl text-secondary'>{p.title}</p>
                                <p className='text-sm'>By Brandon Pyle | {new Date(p.publishedAt).toLocaleDateString()}</p>
                            </div>
                        </article>
                    </Link>
                ))}
            </div>
        </div>
    )
}

export default Main

Tailwind CSS 网格间距混乱

Tailwind CSS Grid Spacing Messed Up

javascript

css

reactjs

css-grid

tailwind-css