Question

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

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

我希望你们能对我有所帮助，因为我对CSS网格还很陌生。

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

提前谢谢！

Answer 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>

Answer 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;
  }

}

Answer 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>

如何使用CSS网格创建以下布局

3 个答案: