是否可以使用 flexbox 和 css 网格来制作这种布局？答案

【问题标题】：Is it possible to make this layout using flexbox and css grid?是否可以使用 flexbox 和 css 网格来制作这种布局？
【发布时间】：2021-01-06 21:03:31
【问题描述】：

我正在尝试创建类似的布局

在 html 和 css 中，你会在下面找到我最终得到的代码。

在代码中我使用的是引导程序和他们的网格系统，我想知道是否可以使用 flexbox 和 css 网格重新创建布局？感谢您的帮助和提示

下面是我想出的代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-4">
        <button>back</button>
      </div>
      <div class="col-xs-4">
        <h4>I WATCHED </h4>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-4">
        <p><img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FzEZJzZFEXm23z-Iw9ESls2jYFYA%3D%2F89x0%3A1511x800%2F1600x900%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F55717463%2Fgoogle_ai_photography_street_view_2.0.jpg&f=1&nofb=1"
            width="156" height="100"></img>
        </p>

      </div>
      <div class="col-lg-8">
        <p>
          <h2>HARRY POITTER AND THE DEADLY HALLOWS</h2>
        </p>
        <h4>2020</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-lg-4">

      </div>
      <div class="col-lg-4">
        <p> <input type="checkbox" id="theday" name="theday" value="theday">
          <label for="theday"> Which day did you watch</label><br></p>

      </div>
      <div class="col-lg-4">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">

      </div>
      <div class="col-xs-4">
        <textarea id="review" name="review" rows="4" cols="50" placeholder="add a rewiev">
          </textarea>
      </div>
      <div class="col-xs-4">

      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">

      </div>
      <div class="col-xs-4">
        <p>Tags Press Tab to complete, Enter to create</p>

      </div>
      <div class="col-xs-4">
        <p>Rating</p>

      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">

      </div>
      <div class="col-xs-4">
        <input placeholder="eg. netflix"></input>
      </div>
      <div class="col-xs-4">
        <p>5 stars </p>

      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>

</html>

【问题讨论】：

嗨，你不需要bootstrap，去阅读这个页面developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout，我也会试试。

标签： html css bootstrap-4

【解决方案1】：

我快速编写了这个代码，我想它会对你有所帮助。您所要做的就是将每个div 逐一添加并添加CSS 以获得更好的视觉效果。

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: min-content;
}
.one {
  grid-column: 1;
  grid-row: 1;
  border: 1px solid red;
}
.two {
  grid-column: 2 / 5;
  grid-row: 1;
  border: 1px solid red;
}
.three {
  grid-column: 1;
  grid-row: 2 / 7;
  border: 1px solid red;
}
.four {
  grid-column: 2 / 5;
  grid-row: 2;
  border: 1px solid red;
}
.five {
  grid-column: 2 / 5;
  grid-row: 3;
  border: 1px solid red;
}
.six {
  grid-column: 2 / 5;
  grid-row: 4;
  border: 1px solid red;
}
.seven {
  grid-column: 2 / 4;
  grid-row: 5;
  border: 1px solid red;
}
.height {
  grid-column: 4 / 5;
  grid-row: 5;
  border: 1px solid red;
}

<div class="container">
  <div class="one">
    <button>back</button>
  </div>
  <div class="two">
    <h4>I WATCHED </h4>
  </div>
  <div class="three">
    <p>
      <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.vox-cdn.com%2Fthumbor%2FzEZJzZFEXm23z-Iw9ESls2jYFYA%3D%2F89x0%3A1511x800%2F1600x900%2Fcdn.vox-cdn.com%2Fuploads%2Fchorus_image%2Fimage%2F55717463%2Fgoogle_ai_photography_street_view_2.0.jpg&f=1&nofb=1"
            width="156" height="100"></img>
    </p>
  </div>
  <div class="four">
    <p>
      <h2>HARRY POITTER AND THE DEADLY HALLOWS</h2>
    </p>
      <h4>2020</h4>
  </div>
  <div class="five">
    <p>
      <input type="checkbox" id="theday" name="theday" value="theday">
        <label for="theday"> Which day did you watch</label><br>
    </p>
  </div>
  <div class="six">
    <textarea id="review" name="review" rows="4" cols="50" placeholder="add a rewiev">
    </textarea>
  </div>
  <div class="seven">
    <p>Tags Press Tab to complete, Enter to create</p>
    <input placeholder="eg. netflix"></input>
  </div>
  <div class="height">
    <p>Rating</p>
    <p>5 stars </p>
  </div>
  
</div>

【讨论】：