如何使用 CSS-grid 创建以下布局答案

【问题标题】：How to create the following layout using CSS-grid如何使用 CSS-grid 创建以下布局
【发布时间】：2019-01-01 20:01:28
【问题描述】：

这实际上是我的第一篇文章。

我想使用 CSS-grid 实现以下结果，但我不确定如何。

我希望你们能帮助我，因为我是 CSS-grid 的新手。

我希望实现的CSS-GRID布局：

提前谢谢你！

【问题讨论】：

花点时间阅读这篇文章 -> stackoverflow.com/help/how-to-ask
欢迎来到 Stack Overflow！请发布您迄今为止尝试/研究过的内容。我相信您可能想查看bootstrap framework 以大致了解网格布局的工作原理。
您好，您可以开始挖掘网格的工作原理，然后自己尝试一下 css-tricks.com/snippets/css/complete-guide-grid gridbyexample.com 从那里您可能会在失败或误解的地方获得帮助...

标签： html css css-grid

【解决方案1】：

你可以使用 boostrap 框架。你可以很容易地用它来划分你的网站。这是如何实现它：https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp 这是如何划分网站的：https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

现在是源代码，但请记住这不是 stackoverflow 的用途，您应该先做一些研究，然后再在这里提问。

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <style>
            div {border:2px solid black} 
        </style>

    </head>
    <body>
        <div class="row">
            <div class="col-sm-3">
                <div>Item</div>
                <div>Item</div>
                <div>Item</div>
                <div>Item</div>
            </div>
            <div class="col-sm-6">
                Item
                <div class="row">
                    <div class="col-sm-6">Item</div>
                    <div class="col-sm-6">Item</div>
                </div>
            </div>
            <div class="col-sm-3">
                Item
            </div>
      </div>
    </body>
</html>

【讨论】：

【解决方案2】：

尺寸可能有点偏差，但您可以根据自己的喜好进行调整。确保在使用网格时使用 Firefox，因为它有最好的编辑器来显示网格和网格编号。

https://codepen.io/coltcarnevale/pen/zypOVB

   <div class="container">
  <div class="item item__1">Item 1</div>
  <div class="item item__2">Item 2</div>
  <div class="item item__3">Item 3</div>
  <div class="item item__4">Item 4</div>
  <div class="item item__5">Item 5</div>
  <div class="item item__6">Item 6</div>
  <div class="item item__7">Item 7</div>
  <div class="item item__8">Item 8</div>
</div>

CSS 文件

.container {
  width: 1000px;
  background-color: grey;
  margin: 30px auto;
  padding: 30px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px repeat(2, 130px) 200px;

  grid-gap: 30px;
}

.item {
  color: white;
  background-color: red;

  &__2 {
    grid-row: 2 / 3;
  }

  &__3 {
    grid-row: 3 / 4;
  }

  &__4 {
    grid-row: 1 / 4;
    grid-column: 2 / span 2;
  }

  &__5 {
    grid-row: 4 / 5;
  }

  &__6 {
    grid-row: 4 / 5;
  }

  &__7 {
    grid-row: 4 / 5;
  }

  &__8 {
    grid-column: 4 / 5;
    grid-row: 1 / -1;
  }

}

【讨论】：

【解决方案3】：

这可能对你有帮助：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 80px 80px 80px 160px;
  grid-gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: floralwhite;
  padding: 20px 0;
  font-size: 18px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 2;
}



.item3 {
  grid-row-start: 1;
  grid-row-end: 6;
    grid-column-start: 4;
  grid-column-end: 4;
}

.item2 {
  grid-row-start: 1;
  grid-row-end: 4;
    grid-column-start: 2;
  grid-column-end: 4;
}

.item6,.item7,.item8 {
  grid-row-start: 4;
  grid-row-end: 6;

}





</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">item</div>
  <div class="item2">item</div>
  <div class="item3">item</div>
  <div class="item4">item</div>
  <div class="item5">item</div>  
  <div class="item6">item</div>
  <div class="item7">item</div>  
  <div class="item8">item</div>  




</div>


</body>
</html>

【讨论】：