我如何使用 CSS 中的网格以这种方式显示项目

Question

我遇到了 css 网格的问题：

如何以这种方式显示项目？在 CSS 中使用网格。我刚开始使用 CSS 网格

我的代码：

.tools {
  .cardscontainer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: " . c1 c2 . " ". c3 c3 .";
    .c1 {
      grid-area: c1;
    }
    .c1 {
      grid-area: c2;
    }
    .c1 {
      grid-area: c3;
    }
  }
}


}

<section className="tools ">
  <h1>Tools</h1>
  <div className="cardscontainer">

    <div className="cards c1">
      <i class="fas fa-file-contract"></i>
      <h1>Tracker</h1>
      <a>Learn more</a>
    </div>

    <div className="cards c2">
      <i class="fas fa-file-contract"></i>
      
      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

    <div className="cards c3">
      <i class="fas fa-file-contract"></i>

      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

  </div>

</section>

**output**

output image

这是输出

Answer 1

您的网格区域第一行不应有空单元格。

class 与您 CSS

中的卡片完全相同

这个想法很好，但我相信错字弄错了

这里有一个可能的修复方法：

.tools {}

.tools .cardscontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: " c1 c1 c2 c2 " ".. c3 c3 ..";
  gap: 10px;
}

.cards {
  border: solid;
}

.c1 {
  grid-area: c1;
}

.c2 {
  grid-area: c2;
}

.c3 {
  grid-area: c3;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<section class="tools ">
  <h1>Tools</h1>
  <div class="cardscontainer">

    <div class="cards c1">
      <i class="fas fa-file-contract"></i>
      <h1>Tracker</h1>
      <a>Learn more</a>
    </div>

    <div class="cards c2">
      <i class="fas fa-file-contract"></i>

      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

    <div class="cards c3">
      <i class="fas fa-file-contract"></i>

      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

  </div>

</section>

Answer 2

12-column 网格的组合总是最有效的，因为 12 有 2,3,4,6,12 个因子，我们在使用它时可以有很大的灵活性。

我已经通过使用 CSS-grid 的 12 列网格尝试了你的问题，并且不需要空的网格项。

试试这个：

.tools{
  width: 500px;
  text-align:center;
}
.cardscontainer{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:200px 200px;
  gap:1rem;
}

.card{
  border:1px solid #ccc;
  padding: 1rem;
  text-align:center;
}

.c1{
  grid-column:1/7;
}
.c2{
  grid-column:7/13;
}
.c3{
  grid-column:4/10;
}

<section class="tools ">
  <h1>Get a Quick Overview for</h1>
  <div class="cardscontainer">

    <div class="card c1">
      <i class="fas fa-file-contract"></i>
      <h1>Tracker</h1>
      <a>Learn more</a>
    </div>

    <div class="card c2">
      <i class="fas fa-file-contract"></i>
      
      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

    <div class="card c3">
      <i class="fas fa-file-contract"></i>

      <h1>Converter</h1>
      <a>Learn more</a>
    </div>

  </div>

</section>

注意：您只需更改放置卡片的位置，即可根据小屏幕尺寸或大屏幕尺寸的设计轻松使用媒体查询来设置项目样式。

我如何使用 CSS 中的网格以这种方式显示项目

how can i display items in this way using grid in CSS

css

grid

css-grid