使用Grid布局实现Spotify的布局效果

核心代码

import React, { memo } from 'react'

interface IGridLayout {
  children: React.ReactNode
  gridGapX: number
  gridGapY: number
}

const GridLayout: React.FC<IGridLayout> = ({ children, gridGapX, gridGapY }) => {
  return (
    <div
      className={`grid w-full grid-cols-6 sm:grid-cols-5 md:grid-cols-5 gap-x-[${gridGapX}px] gap-y-[${gridGapY}px]`}
    >
      {children}
    </div>
  )
}

export default memo(GridLayout)

使用效果