How to make a 3x3 grid of components with a specified width/height across all devices?

Question

I am trying to make a 3x3 grid of components that have a specified height/width that will always be a 3x3 across all devices/screen sizes. The only way I've achieved this is so far is by setting width: '33%' on the child elements. However, this means I can't use the specified width. What is the preferred way of achieving this?

Here's the container:

compContainer: {
    alignSelf: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    width: isSDevice ? 300 : 315,
    justifyContent: 'space-between'
}

And here are the child components:

childComps: {
    height: isSDevice ? 45 : 60,
    width: isSDevice ? 45 : 60,
    alignItems: 'center',
    justifyContent: 'center'
}