Question

我正在进入CSS网格，我想知道如何使用它创建一个响应式的类似瓷砖的布局，如下所示：

对于这样的事情，网格是一种很好的方法吗？标记：

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 50%;
  grid-template-columns: 50% 50%;

  a {
    border: 1px solid blue;
  }
}

<div class="grid">
  <a href="" class="grid-lg">
    Large item here
  </a>

  <div class="grid-sm-container">
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
    <a class="grid-sm">
      Smaller item here
    </a>
  </div>
</div>

Answer 1

您可以参考w3schools的tutorial。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  /* background-color: Tomato; */
  padding: 10px;
}

.grid-container > div {
  background-color: dodgerblue;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

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

<div class="grid-container">
  <div class="item1">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

使用CSS Grid创建响应式磁贴布局

1 个答案: