Flexbox Directions and multiple images within-CodePudding

I am attempting to use flex-box within this build; I have attached both the HTML and CSS code portions. I have attempted to get the DIV container to hold 9 images that should flex-wrap: wrap into 3 rows of 3 images. I am sure I am missing something small; but the best I can do is get one long continuous row of all 9 images.

I have tried to watch some videos and make different changes within HTML and CSS with no success; could anyone please point me in the right direction, or point out my mistake please?

Code:

.gallery {
  width: 100%;
  height: 100vh;
  text-align: center;
  background-color: rgb(0, 4, 17);
  flex-direction: row;
}

.food-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.foodimg {
  display: flex;
}

<section >
  <div>
    <h2>OUR FOOD</h2>

    <div >
      <div >
        <img src="img/food-avocadotoast.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-burger.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-poutine.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-ribs.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-sandwich.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-sausage.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-steak.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-tacos.jpg" alt="" />
      </div>
      <div >
        <img src="img/food-wings.jpg" alt="" />
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Here, It's best to use grids

.food-container{
  display: grid;
  grid-template-columns: auto auto auto; /*that should do it*/
}