如何使我的div类“一个”显示在页面的左侧？

Question

我正在尝试学习网格。我正在使用网格区域，并根据css指南将div类适当地分配给“二”，这应该按照我的指示将元素放置为“一二三”，其中一个位于页面的左侧或页边。不幸的是，这些元素正好排列在第二个网格区域（页面中心）的正下方。任何获得目标的指令或指针都将非常有用。

@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

我用类one two包装了类grid和类<div>。