我对React native比较陌生，不确定如何实现此设计：
Grid layout
我有20 px的水平填充整个应用程序，我想调整这些方块的大小，使他们形成像一个大矩形与这些差距之间。我真的不想硬编码这些大小。
我把总宽度除以3，然后给大正方形2/3，给小正方形1/3，这样就得到了没有任何间隙的设计。但是，有间隙的情况下，我该怎么做呢？

const themedStyles = useThemedStyles();
  const width = Dimensions.get('window').width - 40;
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <ThemedText style={themedStyles.subHeader}>Trending</ThemedText>
        <ThemedText style={[themedStyles.accentText, {fontWeight: 'bold'}]}>
          See all
        </ThemedText>
      </View>

      <View style={styles.cardContainer}>
        <View
          style={{
            width: (width / 3) * 2,
            height: (width / 3) * 2,
            backgroundColor: 'white',
            borderWidth: 2,
          }}></View>

        <View>
          <View
            style={{
              width: width / 3,
              height: width / 3,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
          <View
            style={{
              width: width / 3,
              height: width / 3,
              backgroundColor: 'white',
              borderWidth: 2,
            }}></View>
        </View>
      </View>
    </View>
  );

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
  },
  textContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  cardContainer: {
    flexDirection: 'row',
  },
});