How to change number of columns responsively using useMemo hook in react.js?

Question

It returns fixed column numbers, when you add more contacts it will always be 3 columns, and I need to change numbers for responsive design, like it should be 2 columns or 1 based on screen resolution.

const contactsCollsMemo = useMemo(() => {
    return contactsData?.reduce((acc, contact, i) => {
      acc[i % 3] = (acc[i % 3] || []).concat(contact);
      return acc;
    }, {} as { [key: string]: Contact[] });
  }, [contactsData]);
  
return (
  <div className="contacts-wrapper">
     {Object.keys(contactsCollsMemo || {}).map((key) => (
         <ContactBlock key={key} contacts={contactsCollsMemo[key]} />
     ))}
  </div>
)
//component ContactBlock:
<div className="contacts-block">
      {contacts.map((contact) => (
        <div key={contact.id} className="contacts-info">
          <div className="contacts-name">{contact.name}</div>
          <div className="contacts-phone">Тел.: {contact.phone}</div>
          <div className="contacts-email">E-mail: {contact.email}</div>
        </div>
      ))}
 </div>

Answer 1

To make the number of columns response based on the screen size, you can do it using the media queries https://www.w3schools.com/css/css_rwd_mediaqueries.asp & display grid-template in CSS https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template.