I'm having trouble creating a grid with a group of elements, specifically when I try to add spacing between them. Take a look at the image below with spacing={0} set on the Grid container:
No spacing in Grid container
Now, here's what happens when I add spacing: Spacing added to Grid container = 3
I want the grid to match the width of the buttons positioned above it (refer to the screenshot). Despite trying various solutions, I can't seem to get it to work correctly. Here's my code snippet:
return (
<Grid
sx={{
width: "100vw",
overflowX: "hidden",
padding: { xs: "20px", md: "50px" },
margin: 0,
background: "hsl(0, 0%, 98%)",
}}
container
>
<Grid
sx={{ width: "100%", marginBottom: "30px" }}
item
display="flex"
flexWrap={"wrap"}
justifyContent={"space-between"}
gap={"25px"}
>
<SearchInput />
<FilterMenu />
</Grid>
<Grid container spacing={3} xs={12}>
{countries?.map((country, idx) => (
<Grid item xs={3}>
<CountryCard key={idx} country={country} />
</Grid>
))}
</Grid>
</Grid>