How to display a flexible grid in React-CodePudding

I'm trying to write some code to display some men's tops in a 4x3 pattern, but only show up if there is an image URL, otherwise the page will be blank. There should only be a maximum of 12 pictures before moving onto the next page. How should I proceed?

Right now I have hardcoded everything using the bootstrap react card

Here is what I'm trying to display

CodePudding user response：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); will help your grid to be responive. For displaying only 12 top, use useState to manage it. Add 12 to be displayed in the state and change it as per change in page. Usually this management, also known as pagination, handled by the backend. You send the necessary queries to the backend and they send you the right data to display

CodePudding user response：

I think you can use this code with some editing.

CSS

display:grid;
grid-template-columns: 1fr 1fr 1fr;

React

const [selectedPage, setSelectedPage] = useState(1);

const displayStartOffset = (selectedPage - 1) * 12;
const displayEndOffset = selectedPage * 12;

product_list.slice(displayStartOffset, displayEndOffset).map((product, index) => {
  return ....
})

<button onClick={() => setSelectedPage(selectedPage  1)}>
   Next Page
</button>