javascript - Styling a group of 5 divs to make them spread out equally on larger screens and broken into two lines on smaller screens?

Question

I have a component that consists of 5 square divs, which need to meet the following requirements:

• on large screens I just want them equally spaced out in a single line
• when larger screens, should all be of equal size
• on smaller screens, 2 must be on the top and 3 on the bottom
• when on smaller screens, both lines need to be of the same size, so the top squares can be larger

I am attempting to do so with flexbox and can't get their positioning right. Here is a sample of what I have:

const App = () => {

  return (
    <div className='container'>
      <div className='square-group'>
        <div className='square'>Content 1</div>
        <div className='square'>Content 2</div>
      </div>
      <div className='square-group'>
        <div className='square'>Content 3333</div>
        <div className='square'>Content 44</div>
        <div className='square'>Content 5</div>
      </div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly; 
  flex-wrap: wrap;
}

.square-group {
  display: flex;
  justify-content: space-evenly;
}

.square {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    padding: 5px 9px;
    height: 50px;
  background-color: blue;
  margin: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

question from:https://stackoverflow.com/questions/66050616/styling-a-group-of-5-divs-to-make-them-spread-out-equally-on-larger-screens-and

Answer 1

You can get rid of the extra wrapper and do it like below:

const App = () => {

  return (
    <div className='container'>
        <div className='square'>Content 1</div>
        <div className='square'>Content 2</div>
        <div className='square'>Content 3333</div>
        <div className='square'>Content 44</div>
        <div className='square'>Content 5</div>
    </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.container {
  display: flex;
  flex-direction: row;
}

.square {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  height: 50px;
  box-sizing:border-box;
  background-color: blue;
  margin: 2px 3%; /* 3% of margin between elements */
  color:#fff;
  min-width:0;
  flex:1; /* eqaul width */
}
@media (max-width:800px) {
  .container {
    flex-wrap:wrap; /* allow the wrap*/
    justify-content:center; /* center everything */
  }
  /* this will seperate both lines*/
  .container::after {
    content:"";
    order:1;
    width:100%;
  }
  /**/
  /* the last 3 elements into the second line */
  .square:nth-child(n + 3) {
     order:2;
     margin:2px;
  }
  
  /* give equal margin on both sides to have equal lines*/
  .square:nth-child(1),
  .square:nth-child(3){
     margin:2px 2px 2px 15%;
  }
  .square:nth-child(2),
  .square:nth-child(5){
     margin:2px 15% 2px 2px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>