网格系统的错误比例

Question

我正试图建立一个响应性的网站，我被这个问题困住了:我正在将网格系统应用于一个div，但是我的比例是错误的，如下图所示：

320 In视口宽度的：

​

​

有320 In的设备工具栏中的：

​

​

我想知道这种行为背后的原因。我想这和视野宽度差不多?？预先谢谢你

这是我的代码：

HTML:

<div class="blue-box">
 <p class="container-3"><span  data-aos="fade-right"  data-aos-duration="1800"
    class="word-bb-1">well </span><span
   class="word-bb-2"
    data-aos="fade-left"  data-aos-duration="2000">I think your first
  question</span>
  <span class="word-bb-3" data-aos="fade-right"   data-aos-duration="1500">is about Amine right</span>
  <span class="word-bb-mark" data-aos="fade-down-left"  data-aos-duration="2000">?!!!</span>
  <img src="../vector/murva 1.1.png" class="img-box" alt=""  data-aos="fade-down"
   data-aos-duration="1500">
</p>
</div>

CSS

  .blue-box {
    margin-top: 10vh;
    width: 100vw;
    height: 33vh;
    background-color: #33cccc;
  }

  .img-box {
    width: 40vw;
        position: relative;
        left: -7vw;  }

  .container-3 {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 16vh auto 3vh auto;
    color: #ffffcc;
    font-family: Roboto;
    grid-column-gap: 5vw;
  }

 .word-bb-1 {
   font-size: 10vh;
   font-weight: bold;
   text-transform: capitalize;
   margin-top: 5vh;
   margin-left: 10vw;
  }

  .word-bb-2 {
    margin-top: 8vh;
  }

  .word-bb-3 {
    font-size: 7vw;
    grid-column: 1/3;
    text-align: center;
    font-weight: bold;
  }

  .word-bb-mark {
    font-weight: bold;
    font-size: 3rem;
    text-align: center;
    grid-column: 1/3
  }

Answer 1

将text-align: right添加到.word-bb-1跨度中。它是“好”一词和延伸的跨度的结尾之间的剩余空间。

网格布局中的任何元素都将被拉伸以覆盖其内部的整个网格区域，因此，如果您希望元素在该区域内具有某种对齐性，则必须使用包装，或者，如果它只是文本，则对齐它。

.word-bb-1 {
   ...
   text-align: right;
}