grid.jsx

const Grid = () => (
  <Row>
    <Col>I am a Col</Col>
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
    <Col>I am a Col</Col>    
  </Row>
)

styles.css

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.col {
  width: 100%; // Single column at mobile size
}

@media (min-width: 600px) {
  .col {
    width: calc(50% - 24px); // 2 column with a 24px margin at 600px
  }
}

@media (min-width: 800px) {
  .col {
    width: calc(33.333% - 24px) // 3 column with a 24px margin at 800px
  }
}

@media (min-width: 1000px) {
  .col {
    width: calc(25% - 24px); // 4 column with a 24px margin at 1000px
  }
}