我試圖做一個菜單，有4個部分，每個部分有6個菜單項。我希望4個部分有自己的角落，我希望每個部分列出2列/3行的6個項目。

我創建了一些類來分隔各個部分和菜單項。這是我的菜單的樣子 和 這是我想要的樣子

那么是什么樣的css代碼能讓它看起來像圖片中的這個呢？

const Food = () => {

    return (
        <div> <h2 class ="AppHead">Appetizers</h2>
        
        <div class = 'whole-menu'>

        <div class = "section">
            {data.appetizers.map((food) => {
                    return (

                        
                        <div class = "food-item">                        
                        {food.name}
                        <span>- </span>
                        {food.price}
                        <p> </p>
                        {food.description}
                        </div>
                        
                    )
            })} </div>


<div class = "section">
            {data.dishes.map((food) => {
                    return (

                        
                        <div class = "food-item">                        
                        {food.name}
                        <span>- </span>
                        {food.price}
                        <p> </p>
                        {food.description}
                        </div> 
                    )
                    
            })} </div>

<div class = "section">
                        {data.desserts.map((food) => {
                    return (

                        
                        <div class = "food-item">                        
                        {food.name}
                        <span>- </span>
                        {food.price}
                        <p> </p>
                        {food.description}
                        </div>
                    )
                    
            })} </div>


<div class = "section">
                        {data.drinks.map((food) => {
                    return (

                        
                        <div class = "food-item">                        
                        {food.name}
                        <span>- </span>
                        {food.price}
                        <p> </p>
                        {food.description}
                        </div>
                    )
                    
            })} </div>
        </div> </div>
    );
        };



export default Food;