Rows of equally sized images

Extensions
1

I’m struggling to get the styling to work with Shopify components. Here is the flex layout I’m trying to convert from native HTML https://codepen.io/devcon/pen/Eaxmdbd

image
image715×415 56 KB

<Grid columns={Style.default(['fill']).when({
  viewportInlineSize: { min: 'small' },
  }, ['1fr', '1fr', '1fr'])}>
  <InlineLayout columns={['80%', '20%']}>
    <Image fit="cover" source="http://s3.amazonaws.com/digitaltrends-uploads-prod/2017/08/31358195_l.jpg" />
    <View blockAlignment={'start'}>
      <Button kind="plain">
        <Icon source="delete" accessibilityLabel="delete" />
      </Button>
    </View>
  </InlineLayout>

image
image634×358 43.9 KB

edit: Whilst reading through another issue I discovered aspectRatio and that seems to help with the image height at least. But I wish I could do flex-wrap of children that are all x pixels wide…