Grid column with css grid in jss file

file.js

import { useState } from 'react'
import { makeStyles } from '@material-ui/core/styles'

import { Tabs, Tab, Container } from '@material-ui/core'
import styles from './styles'

const useStyles = makeStyles(styles)

const PageBodyClientAndPartner = ({ data }) => {
  const [value, setValue] = useState(0)
  const content = data.fields
  const classes = useStyles()

  const handleChange = (event, newValue) => {
    setValue(newValue)
  }

  return (
    <Container
      maxWidth="lg"
      style={{ marginTop: 68 }}
    >
      <Tabs
        value={value}
        indicatorColor="secondary"
        textColor="secondary"
        onChange={handleChange}
        aria-label="disabled tabs example"
        className={classes.tabs}
      >
        {Array.isArray(content) && content.map((tab) => {
          return (<Tab label={tab.field.field} key={tab.field.field} />)
        })}
      </Tabs>
      <div className={classes.logoContainer}>
        {Array.from({ length: 10 }).map((key) => (
          <div className={classes.item} key={key}>
            <div style={{ backgroundColor: 'red', flex: 1, width: '100%', height: '100%' }} key={key}>
              <span>logo</span>
            </div>
          </div>
        ))}
      </div>
    </Container>
  )
}

export default PageBodyClientAndPartner

style.js

export default function styles(theme) {
  return {
    tabs: {
      borderBottom: `1px solid ${theme.palette.divider}`,
    },
    item: {
      // flex: '0 0 calc(100% / 6)',
      // padding: 12,
      padding: '24px',
      backgroundColor: 'red',
    },
    logoContainer: {
      // display: 'flex',
      // width: '100%',
      // minHeight: '30vh',
      // flexWrap: 'wrap',
      // margin: -12,

      display: 'grid',
      gridTemplateColumns: 'repeat(6, minmax(108px, 1fr))',
      gridAutoRows: 'minmax(180px)',
      gridGap: '24px',
      [theme.breakpoints.down('md')]: {
        gridTemplateColumns: 'repeat(4, minmax(108px, 1fr))',
      },
      [theme.breakpoints.down('sm')]: {
        gridTemplateColumns: 'repeat(2, minmax(108px, 1fr))',
      },
      [theme.breakpoints.down('xs')]: {
        gridTemplateColumns: 'repeat(1, minmax(108px, 1fr))',
      },
    },
  }
}