How can I vertically align data by 3 when using the react map function?

Question

I have an array object called farm and this data has a total of 10 objects, so when the map function is executed, "hambuger" comes out 10 times.

At this point, I want to vertically align the hamburger data by 3 so that there are 4 lines in total. Of course, there is only one data in the last line.

like this

 hamburger  hamburger hamburger

 hamburger  hamburger hamburger

 hamburger  hamburger hamburger
 
 hamburger

But when I run my code, it all aligns vertically.

like this image

this is my code

const Container = styled.div`
  background: lightblue;
  width: 100%;
  display: inline-block;
  flex-direction: row;
`;

const FarmBox = styled.div`
  background-color: lavender;
  display: inline-block;
  flex-wrap: wrap;
  width: 10%;
  height: 13%;
  flex-direction: row;
`;

  return (
    <>
    
      {farm.map((v, i) => {
        return (
          <Container key={i}>
            <FarmBox>hambuger</FarmBox>
          </Container>
        );
      })}

    </>
  );
};

export default About;

How can i change my code?

Answer 1

becouse Container is Div and it has 100% width, change this