title: CSS Make siblings children same width and height (squares) in 100% width parent
body: <p>I have a parent view which width is &quot;100%&quot; (not screen width), and I want to have each children with the same width and height.</p>
  <p>My codes is:</p>
  <pre><code>&lt;View style={styles.container}&gt;
    &lt;View style={styles.item} /&gt;
    &lt;View style={styles.item} /&gt;
    &lt;View style={styles.item} /&gt;
    &lt;View style={styles.item} /&gt;
  &lt;/View&gt;
  
  const styles = StyleSheet.create({
    container: {
      width: &quot;100%&quot;,
      flexDirection: &quot;row&quot;,
      alignItems: &quot;center&quot;,
    },
    item: {
      width: 75,
      height: 75,
      marginRight: 10,
      backgroundColor: &quot;red&quot;,
    },
  });
  </code></pre>
  <p>But this is not responsive for all devices (in small sevices some of the children go out of screen)... Is there any other way to do that?</p>
  <p>Thank you.</p>