<Box width={[1, 1/2]} /> always has 'display:block'

[bchenSyd]

not quite sure if I understand correctly, but as far as I can see, the element is already rendered as a

with display:block, not inline-block, so wouldn't it always take the full width?

here is an example from the documentation, don't understand how it works:

// Different widths at different breakpoints
<Box
  width={[
    1/2,
    1/3,
    1/4,
    1/6
  ]}
/>

[bchenSyd]

I see....

it effectively takes the entire rendering line, but leaves spaces on the right , so the effect as padding-right. Shouldn't Box has display:inline-block (as most modern grid systems does)??

[bchenSyd]

the other options is to

<Flex>
    <Box width={1/2}/>
    <Box width={1/2}/>
</Flex>

since the div is wrapped inside a flex, it wont' take over the entire row; but again, this is not straight-forward and I would't expect to do so

[jxnblk]

CSS width can be used for a lot of different things, but your second example is almost identical to the first example in the readme, so I think you've figured it out – see https://developer.mozilla.org/en-US/docs/Web/CSS/width for more about using width