This content originally appeared on DEV Community and was authored by Walktheworld
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!
This content originally appeared on DEV Community and was authored by Walktheworld
Walktheworld | Sciencx (2022-07-21T23:24:26+00:00) How to display your react card components as a grid. Retrieved from https://www.scien.cx/2022/07/21/how-to-display-your-react-card-components-as-a-grid/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.