text: import * as React from 'react';
  import PropTypes from 'prop-types';
  import Box from '@mui/material/Box';
  
  function Item(props) {
    const { sx, ...other } = props;
    return (
      <Box
        sx={{
          bgcolor: 'primary.main',
          color: 'white',
          p: 1,
          borderRadius: 1,
          textAlign: 'center',
          fontSize: '1rem',
          fontWeight: '700',
          ...sx,
        }}
        {...other}
      />
    );
  }
  
  Item.propTypes = {
    sx: PropTypes.oneOfType([
      PropTypes.arrayOf(
        PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
      ),
      PropTypes.func,
      PropTypes.object,
    ]),
  };
  
  export default function GridAutoColumns() {
    return (
      <div style={{ width: '100%', height: 220 }}>
        <Box
          sx={{
            display: 'grid',
            gridAutoRows: '40px',
            gap: 1,
          }}
        >
          <Item sx={{ gridColumn: '1', gridRow: 'span 2' }}>span 2</Item>
          {/* The second non-visible row has height of 40px */}
          <Item sx={{ gridColumn: '1', gridRow: '4 / 5' }}>4 / 5</Item>
        </Box>
      </div>
    );
  }
  