你可以拉伸 CSS 网格来填充屏幕的宽度吗？

Question

我想将网格拉伸成下面图片中附加的第二张图片（对不起，我不能直接发布，我没有足够的积分直接发布图片）

我的代码：

.container {  
    display: grid;
    grid-template-columns: 0.5fr 2.4fr 1.3fr 1fr;
    grid-template-rows: 1fr 1fr 1fr [F] 1fr;
    /* gap: 1px 0px; */
    grid-auto-flow: row;
    grid-template-areas:
      "One oneTitle oneDescrip Picture"
      "Two twoTitle twoDescrip Picture"
      "Three threeTitle threeDescrip Picture"
      "Four fourTitle fourDescrip Picture";
  }
  
  .One { grid-area: One; }
  
  .Two { grid-area: Two;  }
  
  .Three { grid-area: Three; }
  
  .Four { grid-area: Four; }
  
  .oneTitle { grid-area: oneTitle;  }
  
  .twoTitle { grid-area: twoTitle; }
  
  .threeTitle { grid-area: threeTitle; }
  
  .fourTitle { grid-area: fourTitle; }
  
  .oneDescrip { grid-area: oneDescrip; }
  
  .twoDescrip { grid-area: twoDescrip; }
  
  .threeDescrip { grid-area: threeDescrip; }
  
  .fourDescrip { grid-area: fourDescrip; }
  
  .Picture { grid-area: Picture; }
  
  .One,.Two,.Three,.Four {
      font-size: 60px;
      color: lightgray;

  }

  .oneTitle, .twoTitle, .threeTitle, .fourTitle, .oneDescrip, .twoDescrip, .threeDescrip, .fourDescrip {
    /* padding-top: 35px; */
    color: black;
    padding-right: 30px;
    padding-left: 20px;
  }

  
  .oneTitle, .twoTitle, .threeTitle, .fourTitle {
    font-weight: bold;
    padding-top: 17px;
    font-size: 25px;
  }

<div class="container">
      <div class="One">1</div>
      <hr>
      <div class="Two">2</div>
      <div class="Three">3</div>
      <div class="Four">4</div>
      <div class="oneTitle">Connect your Crowds</div>
      <div class="twoTitle">Gamify the Experience</div>
      <div class="threeTitle">Engage with Business Growth</div>
      <div class="fourTitle">Continuous Interaction</div>
      <div class="oneDescrip">Descript</div>
      <div class="twoDescrip">Descript</div>
      <div class="threeDescrip">whehwehahha</div>
      <div class="fourDescrip">Descriptjwsenwejwje</div>
      <div class="Picture"><img id="block3img" src="https://i.imgur.com/PEbCBjt.png")></div>
      </div>

它的样子：

我想要它的样子：

Answer 1

在.container 规则集中进行此声明。 width: 100%;