title: How to make a 3 column - 4 row layout of responsive squares?
body: <p>I want to create a 3x4 grid layout of squares that is device independent. The container <code>&lt;View&gt;</code> for these squares has an unknown width/height. I want the squares to grow to fill the available container.</p>
  <p>Code for container:</p>
  <pre><code>squaresContainer: {
      alignSelf: 'center',
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: 'space-between',
      flex: 1,
      marginHorizontal: 15
  }
  </code></pre>
  <p>And the 'squares' (which are currently not squares), using 33% flexBasis to get the 3 columns. There will always be 12 squares total so the four rows should always happen.</p>
  <pre><code>square: {
      alignItems: 'center',
      justifyContent: 'center',
      flexGrow: 1,
      flexShrink: 0,
      flexBasis: '33%'
  }
  </code></pre>