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

我創(chuàng)建了一些類來(lái)分隔各個(gè)部分和菜單項(xiàng)。這是我的菜單的樣子 和 這是我想要的樣子

那么是什么樣的css代碼能讓它看起來(lái)像圖片中的這個(gè)呢？

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;