Skip to content

CSS Refactoring

const style =
    data.length === 3
      ? { gridTemplateColumns: 'repeat(3, 1fr)' }
      : { gridTemplateColumns: 'repeat(2, 1fr)' };

return <div style={style}></div>

Solution

[!info]-

return <div data-grid-columns={data.length === 3 ? 3 : 2}></div>
div {
  grid-template-columns: repeat(2, 1fr);
 &[data-grid-columns="3"] {
     grid-template-columns: repeat(3, 1fr);
   }
}


Last update: 2022-11-04