如何让我的 div 类“一个”位于页面左侧？答案

【问题标题】：How do I get my div class "one" to be on the left side of the page?如何让我的 div 类“一个”位于页面左侧？
【发布时间】：2020-09-18 12:35:12
【问题描述】：

我正在尝试学习网格。我正在使用网格区域并根据 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>

【问题讨论】：

标签： html css grid

【解决方案1】：

有关代码更改，请参见以下代码 sn-p。

我已将 one 和 two 类与 grid <div> 类包装在一起。
我已经从<h3> 中删除了one 类和two 类
我删除了@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>

【讨论】：