How to display your react card components as a grid

I am working through my software engineering program and there is not a lot of focus on the styling side of things. So I attempted to teach myself how to display my react applications in grid form for my projects. I found there are a lot of fancy customizations you can do in grid formatting. But let's talk about some basics.

When using styled-components, we can do the styling right on the PageList.js file. We define Wrapper as a styled-component and in there we will use our CSS formatting to get the grid.

import PageCard from "./PageCard"
import styled from "styled-components";

const PageList = ({pages, user}) => {
  const renderPages = pages?.map(page => <PageCard key={page.id} page={page} user={user} />)
    return (
      <Wrapper>{renderPages}</Wrapper>
       )
}  
 const Wrapper = styled.section`
  display: grid ;
  grid-template-columns: auto auto auto;
  grid-gap: .5rem;
`;

export default PageList

Here we map through each Page and we render it within our Wrapper component. By setting our grid-template-columns as "auto auto auto" that will set the grid as three columns wide. If we set it to "auto auto" that will make it two columns wide. I prefer the auto formatting but if you would like them at fixed widths just use your CSS tools to set those widths.

That same code works in a CSS file if you prefer styling through a single file.

Thanks for coming to my DEV talk, Happy Coding!