Usando Material-UI, el ancho del componente de mampostería no llena el ancho del contenedor principal. El ancho de este espacio que falta es exactamente el ancho del espaciado, lo que tiene sentido si hay un elemento al lado.

Traté de calcular el ancho de la mampostería para que fuera el ancho del elemento Box más un espacio de 8 *, pero esto se rompe tan pronto como hay una barra de desplazamiento involucrada.

¿Cómo puedo usar todo el ancho del contenedor para mampostería?

mwe (solo un ejemplo de la documentación con un cuadro agregado en la parte superior):

 const heights = [150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]; const Item = styled(Paper)(({ theme }) => ({ ...theme.typography.body2, color: theme.palette.text.secondary, border: '1px solid black', display: 'flex', alignItems: 'center', justifyContent: 'center', })); <Container> <Box style={{ border: '1px solid black', padding: '20px' }}> <Typography variant="h5"> An Element to show the width of the contianer </Typography> </Box> <Box style={{ marginTop: '20px' }}> <Masonry columns={4} spacing={4}> {heights.map((height, index) => ( <Item key={index} sx={{ height }}> {index + 1} </Item> ))} </Masonry> </Box> </Container>

Captura de pantalla del MWE. Área faltante marcada en rojo: