React: CSS Grid number of rows relative to screen size & store what data is displayed on each page

Question

I'm making an app with React, similar to Spotify and SoundCloud in functionality. Please look at the below image of my design...[![enter image description here][1]][1]

I'm using display: grid to display the Record components. Is there a way using display grid I can remove the components that don't fit on the screen and then display those components on the next screen? I have done some research on this and found Virtual Scrolling. I don't think this is the tool I'm looking for though because from what I understand that applies to only scrolling, and serves a function similar to Google search.

What I'd like to do is have a way to declare what Record components belong on what page, relative to how many are displayed on each page.

My code looks like this for displaying the Records...

  <DisplayRecords theme={theme}>
    {albumData.map((album) => (
      <Record
        name={album.album_name}
        shadowColour={album.album_shadow}
        photo={album.album_photo}
        theme={theme}
      />
    ))}
  </DisplayRecords>

const DisplayRecords = styled.div`
  height: calc(100% - 4.7rem);
  position: relative;
  margin: 0rem 4rem;

  // grid things
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-column-gap: 8rem;
  grid-row-gap: 8rem;
`;

Thanks in advance for any and all help.

score 1 · Answer 1 · answered Apr 18 '21 at 20:06

I don't think you should do this through CSS as your pagination content is probably handled by your javascript code.

You can check the value of window.innerWidth in your React code (see here), and according to that, divide the elements of albumData into chunks (see here). Then you can display each chunk as being the content of a "page", and display the next chunk of records when clicking on the "Next page" button.

React: CSS Grid number of rows relative to screen size & store what data is displayed on each page

1 Answers1