I am trying to make a blog website with two columns for the posts. The first column displays one large-format post while the second displays 3 small-format posts (pictured below). However, when i do this to small-format posts seem to respect the spacing of the large-format post, even though they are in different columns. Here is a picture:
As you can see, I want the posts on the right side to be spaced evenly, but the second post starts at the end of the large-format post on the first column.
Here is my code:
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
Please let me know if you have any ideas on how to fix this issue! Thanks.
Advertisement
Answer
I figured out what was causing the issue. All I had to do was wrap each of the map functions in a div, like so:
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