Grabbing an index to map around it to style my blogs page - arrays

Question

I'm trying to style my blogs page for my website. I integrated my Contentful blog using API's and its all displayed correctly, but I just don't know how to target individual elements to style them individually. I would like to be able to style my main blogs page as a grid layout, attached is the specific grid layout I would like to achieve. I just don't know the code syntax to achieve this. I've been told I need to target the index and use .map but I'm still quite confused
[![the grid layout I want to achieve ][1]][1]
I would also like to be able to add tags to fetch the tags from my Contentful and display them on my blogs main page and on the individual slugs page but I dont know the syntax to fetch this data
import Footer from "../components/Footer/Footer";
import { createClient } from "contentful";
import BlogCard from "../components/BlogCard/BlogCard";
export async function getStaticProps() {
const array = [1, 4, 9, 16];
const map = array.map((x) => x * 2);
const client = createClient({
space: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
previewacessToken: process.env.PREVIEW_ACCESS_TOKEN,
});
const res = await client.getEntries({ content_type: "menuItem" });
return {
props: {
blog: res.items,
},
};
}
export default function Blog({ blog }) {
return (
<div>
<div className="bg-[#F5f5f5] pt-16 max-md:pt-10 max-lg:pt-4">
<div className="flex flex-col">
<header className="z-10">
<Navbar />{" "}
</header>
<main className="flex-1">
<div className="relative left-1/2 mt-12 min-w[100vw] translate-x-[-50%]">
<div className="relative mx-auto pb-30 lg:pb-30">
<div className="px-8 md:px-8.5 lg:px-40">
<div className="mx-auto max-w-container">
<div className="max-md:w-full">
<div className="grid grid-cols-2 grid-rows-3 gap-10 mt-24 mb-32 h-full sm:grid-cols-2 sm:h-full sm:w-full md:mb-24 md:w-full max-lg:block max-md:mt-16 max-md:mb-4">
{/* {blog.map((index) => (
<BlogCard key={index} menuItem={index} />
))} */}
{/* {blog.map((menuItem) => (
<BlogCard key={menuItem.sys.id} menuItem={menuItem} />
))} */}
{blog.map((menuItem) => (
<BlogCard key={menuItem.sys.id} menuItem={menuItem} />
))}
</div>
</div>
</div>
<Footer />
</div>
</div>
</div>
</main>
</div>
</div>
</div>
);````
[1]: https://i.stack.imgur.com/YzU1P.png