Tengo una variedad de contenidos que estoy obteniendo de cms sin cabeza. Los estoy poniendo en cuadrícula y tratando de hacer que comiencen en una columna diferente, pero estoy luchando por encontrar una manera de hacerlo.
Si solo representara los elementos, se vería así, todo comienza en la columna 1:
<div className="relative grid grid-cols-3"> {projects.map((project) => ( <div className={"col-start-1"} key={project.data.title} > <ProjectThumbnail/> </div> ))} </div>Y esto es lo que estoy tratando de lograr:
<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>Gracias
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}/> }Suponiendo que desea que la columna sea 1, 3 y 2, en ese orden, y repitiendo indefinidamente, entonces podría usar el índice del mapa y calcular el número de columna adecuado a partir de eso usando los residuos. Como esto:
<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>