An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
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!
Original Link: https://dev.to/walktheworld/how-to-display-your-react-card-components-as-a-grid-1bm4
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To