Tengo una cuadrícula que debe ser un cuadrado que responda al tamaño de la ventana, y dentro de esta cuadrícula hay un botón que debe ocupar la totalidad de la cuadrícula. Actualmente, la cuadrícula cambia de tamaño correctamente, pero el contenido dentro de ella no ocupa el tamaño completo de la cuadrícula. Aquí está mi código
galleryButtonContainer: { width: '100%', height: 0, paddingBottom: '100%', borderRadius: '20%', backgroundColor: theme.palette.grey.light, '&:hover': { backgroundColor: theme.palette.grey.light, }, }, image: { objectFit: 'cover', width: '100%', height: '100%', borderRadius: '20%', }, thumbnailIcon: { width: '50%', height: '50%', }, <Grid className={classes.galleryButtonContainer}> <Button onClick={() => toPage( `/gallery/view/organizationEvent/${data.organizationEventId}` ) } > {hasPhotos ? ( <img src={thumbnail} alt="gallery thumbnail" className={classes.image} /> ) : ( <PhotoLibraryIcon className={classes.thumbnailIcon} /> )} </Button> </Grid>