如何讓我的 div class “one”位於頁面左側？

Question

我正在嘗試學習網格。 我正在使用網格區域並根據 css 指南適當地分配我的 div class“兩個”，該指南應該按照我的指示放置元素“一二三”一個位於頁面的左側或邊緣。 不幸的是，這些元素直接排列在頁面中心的網格區域二下方。 任何獲得目標的指令或指針都會很棒。

@import url('https://fonts.googleapis.com/css2? 
family=Bangers&family=Bree+Serif&family=Chelsea+Market&family=Oswald:wght@300&display=swap');
.grid {
display: grid;
grid-template-areas:
    "one two three"
    "one two three"
    "one two three";
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(3, 310px);
}

.title {
font-family: 'Chelsea Market', cursive;
font-size: 30px;
text-align: center;
color: teal;
}

input[type="number"] {
width:40px;
}

.titles {
font-family: 'Bree Serif', serif;
}

.pizza {
text-align: center;
color: tomato;
}


.one {

grid-area: one;
}

.two {
text-align: center;
grid-area: two;
color: tomato;
}

.three {

grid-area: three;
}

h2 {
font-size: 30px;
font-family: 'Oswald', sans-serif;
text-align: center;
}

<div class="pizza">
                    <h3>Pizza by the slice ($2)</h3><br>
                    <input type="number" id="numSlice">
                </div>
                <div class="two">
                    <h3 class="two">Toppings</h3>
                    <p class="titles">Per Pepperoni($0.25):</p>  <input type="number" id="numPepp">
                    <p class="titles">Per Meatball($0.35):</p>  <input type="number" id="numMeat">
                    <p class="titles">Per Mushhroom($0.40):</p>  <input type="number" id="numMush">
                    <p class="titles">Per Olive($0.20):</p>  <input type="number" id="numOlives">
                </div>

                <div class="one">
                    <h3 class="one">Sides</h3>
                    <p class="titles">Potato Salad($1.25):</p>  <input type="number" id="numPSalad">
                    <p class="titles">Humus($2.50):</p>  <input type="number" id="numHumus">
                    <p class="titles">Caesar Salad($3.50):</p>  <input type="number" id="numCSalad">
                    <p class="titles">Garden Salad($2.25):</p>  <input type="number" id="numGSalad">

                </div>

Answer 1

請參閱以下代碼片段以了解代碼更改。

1. 我已經用 class grid <div>包裹了 class one和 class two 。
2. 我從<h3>中刪除了 class one和 class two
3. 我刪除了@import url('https://fonts.googleapis.com/css2? family=Bangers&family=Bree+Serif&family=Chelsea+Market&family=Oswald:wght@300&display=swap'); 因為存在錯誤並導致 CSS 無法正常工作。

 .grid { display: grid; grid-template-areas: "one two three" "one two three" "one two three"; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: repeat(3, 310px); }.title { font-family: 'Chelsea Market', cursive; font-size: 30px; text-align: center; color: teal; } input[type="number"] { width: 40px; }.titles { font-family: 'Bree Serif', serif; }.pizza { text-align: center; color: tomato; }.one { grid-area: one; }.two { text-align: center; grid-area: two; color: tomato; }.three { grid-area: three; } h2 { font-size: 30px; font-family: 'Oswald', sans-serif; text-align: center; }

 <div class="pizza"> <h3>Pizza by the slice ($2)</h3><br> <input type="number" id="numSlice"> </div> <div class="grid"> <div class="two"> <h3>Toppings</h3> <p class="titles">Per Pepperoni($0.25):</p> <input type="number" id="numPepp"> <p class="titles">Per Meatball($0.35):</p> <input type="number" id="numMeat"> <p class="titles">Per Mushhroom($0.40):</p> <input type="number" id="numMush"> <p class="titles">Per Olive($0.20):</p> <input type="number" id="numOlives"> </div> <div class="one"> <h3>Sides</h3> <p class="titles">Potato Salad($1.25):</p> <input type="number" id="numPSalad"> <p class="titles">Humus($2.50):</p> <input type="number" id="numHumus"> <p class="titles">Caesar Salad($3.50):</p> <input type="number" id="numCSalad"> <p class="titles">Garden Salad($2.25):</p> <input type="number" id="numGSalad"> </div> </div>