I have an array of contents that I am fetching from headless cms. I am putting them on grid and trying to make them start at different column, but I am struggling to find a way to go about it.
If I were to just render the items it would look like this, everything starts at column 1:
<div className="relative grid grid-cols-3">
{projects.map((project) => (
<div
className={"col-start-1"}
key={project.data.title}
>
<ProjectThumbnail/>
</div>
))}
</div>
And this is what I am trying to achieve:
<div className="relative grid grid-cols-3">
<div className="col-start-1">
<ProjectThumbnail/>
</div>
<div className="col-start-3>
<ProjectThumbnail/>
</div>
<div className="col-start-2>
<ProjectThumbnail/>
</div>
<div className="col-start-1">
<ProjectThumbnail/>
</div>
<div className="col-start-3>
<ProjectThumbnail/>
</div>
<div className="col-start-2>
<ProjectThumbnail/>
</div>
...
</div>
Thank you
const classes = ["col-start-1", "col-start-3", "col-start-2"];
const projects = [
{data: {title: 'Title 1'}},
{data: {title: 'Title 2'}},
{data: {title: 'Title 3'}},
{data: {title: 'Title 4'}},
{data: {title: 'Title 5'}},
{data: {title: 'Title 6'}},
{data: {title: 'Title 7'}}
];
function ProjectThumbnail({project}) {
return <span>[{project.data.title}]</span>
}
function Grid({projects}) {
return (
<div className="relative grid grid-cols-3">
{projects.map((project, idx) => (
<div
className={classes[idx % classes.length]}
key={project.data.title}
>
<ProjectThumbnail project={project}/>
</div>
))}
</div>
);
}
function App() {
return <Grid projects={projects}/>
}
Assuming you want the column to be 1,3 and 2, in that order, and repeating indefinitely, then you could use the index from map, and calculate the proper column number from that using remainders. Like this:
<div className="relative grid grid-cols-3">
{projects.map((project, i) => (
<div
className={`col-start-${i % 3 === 0 ? 1 : (i % 3 === 1 ? 3 : 2)}`}
key={project.data.title}
>
<ProjectThumbnail />
</div>
))}
</div>