Just an FYI - styling in React using CSS is quite similar to regular CSS. Each individual box has its own code snippet:
export const CardWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
border-radius: 4px;
background: ${(props) => props.theme.colors.backgrounds.project};
padding-bottom: 28px;
padding-right: 0px;
height: 300px;
width: 375px;
`;
Every box should follow this format: https://i.sstatic.net/51OlN.jpg
However, when increasing the width as shown in the image below, there should be black lines separating each box: https://i.sstatic.net/xSN3y.jpg
export const DeploymentsWrapper = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, 335px);
grid-gap: 20px 30px;
max-height: inherit;
width: 100%;
box-sizing: border-box;
padding: 13px 30px 30px 30px;
`;