如何创建这样的 CSS 网格布局？答案

【问题标题】：How do I create a CSS grid layout like this?如何创建这样的 CSS 网格布局？
【发布时间】：2021-12-15 23:37:21
【问题描述】：

我正在尝试创建这样的网格布局

我能够创建此布局。我在第一列苦苦挣扎，我不希望它占据行的全部高度。我想像第一张图片一样实现网格布局。灰色单元格只是我稍后要添加移动内容的 div。

我的 CSS 代码：

.cards_grid {
    grid-auto-columns: 1fr;
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    -ms-grid-rows: auto 1.5rem auto;
    grid-template-areas:
        "first first first first second second second second second third third third"
        "fourth fourth fourth fourth fifth fifth fifth fifth sixth sixth sixth sixth";
    -ms-grid-columns: minmax(auto, 1fr);
    grid-template-columns: minmax(auto, 1fr);
}

我已经尝试过grid-layout-rows: masonry，但大多数浏览器都不支持它。

【问题讨论】：

嘿 Ankit，请务必将您的布局代码添加到问题中。用户会更容易以更好的方式回答您的查询。
我期待 HTML 代码以及 CSS，但您不是在使用 Bootstrap - 这将帮助您以最佳和简单的方式创建网格

标签： html css css-grid

【解决方案1】：

坚持使用明确定义网格区域的方法，您可以使用与水平放置相同的技术 - 在这种情况下，您已经定义了 12 列 - 垂直放置。

看起来好像网格有 5 行，第一个元素向下延伸 2 行，其下方的元素（第 4 个元素）向下延伸 3 行，依此类推。

这个 sn-p 删除了一些不需要的 CSS，并将整个网格设置为 4:3 的纵横比。显然，这可能会根据您的特定要求而改变。

.cards_grid {
  width: 100vmin;
  height: 75vmin;
  display: grid;
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  grid-template-areas: "first  first  first  first  second second second second second third third third" "first  first  first  first  second second second second second third third third" "fourth fourth fourth fourth second second second second second third third third" "fourth fourth fourth fourth fifth  fifth  fifth  fifth  sixth  sixth sixth sixth" "fourth fourth fourth fourth fifth  fifth  fifth  fifth  sixth  sixth sixth sixth";
}

.cards_grid>div {
  background: gray;
}

.cards_grid>div:nth-child(1) {
  grid-area: first;
}

.cards_grid>div:nth-child(2) {
  grid-area: second;
}

.cards_grid>div:nth-child(3) {
  grid-area: third;
}

.cards_grid>div:nth-child(4) {
  grid-area: fourth;
}

.cards_grid>div:nth-child(5) {
  grid-area: fifth;
}

.cards_grid>div:nth-child(6) {
  grid-area: sixth;
}

<div class="cards_grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

【讨论】：

【解决方案2】：

你可以试试这个，我知道有比这个更好的，你可以自己试试

<!DOCTYPE html>
<html>
<head>
<style>
body{
      padding: 0;
    margin: 0;
}
.container{
      width: 100%;
    height: 490px;
    background: #e5e5e5;
    display: flex;
    flex-wrap: wrap;
}
.box-cl-1{
      width: 30%;
    display: flex;
    flex-direction: column;
}

.box-1{
    margin: 10px;
      flex: 30%;
    height: 130px;
    background: #8f8f8f;
}

.box-2{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-cl-2{
    width: 70%;
    display: flex;
    flex-direction: column;
}

.box-3{
    margin: 10px;
    flex: 70%;
    height: 250px;
    background: #8f8f8f;
}

.box-4{
    margin: 10px;
    flex: 30%;
    height: 250px;
    background: #8f8f8f;
}

.box-5{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

.box-6{
    margin: 10px;
      flex: 50%;
    height: 200px;
    background: #8f8f8f;
}

</style>
</head>
<body>

<div class="container">
    <div class="box-cl-1">
      <div class="box-1"></div>
      <div class="box-2"></div>
    </div>
    <div class="box-cl-2">
        <div style="display: flex;">
            <div class="box-3"></div>
            <div class="box-4"></div>
        </div>
        <div style="display: flex;">
            <div class="box-5"></div>
            <div class="box-6"></div>
        </div>
    </div>
</div>

</body>
</html>

【讨论】：

【解决方案3】：

你可以使用简单的砖石风格。在 GitHub 上使用它：https://masonry.desandro.com/

【讨论】：

【解决方案4】：

您使用 Grid 创建包装器 (.grid-box)，然后定义您的模板：grid-template-columns 和 grid-template-rows。

然后您可以使用 grid-*-start 定位您的各个框。这是您在网格中的模板。

.grid-box {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 25% 25% 25% ;
  grid-gap: 10px;
  padding: 10px;
}

.box-1 {
  background: red;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}

.box-2 {
  background: green;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box-3 {
  background: gray;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box-4 {
  background: yellow;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
}

.box-5 {
  background: orange;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
}

.box-6 {
  background: lightblue;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
}

<div class="grid-box">
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div class="box-3">3</div>
    <div class="box-4">4</div>
    <div class="box-5">5</div>
    <div class="box-6">6</div>
</div>

【讨论】：