如何用CSS制作多個正方形

在CSS中，我們可以使用多種方法制作多個正方形，以下是一個簡單的示例，展示如何使用CSS創(chuàng)建多個正方形格子：

我們需要在HTML中創(chuàng)建一個包含多個正方形的容器，我們可以創(chuàng)建一個div元素，并在其中添加多個子div元素，每個子div代表一個正方形。

<div class="square-container">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

我們使用CSS來樣式化這些正方形，我們可以設(shè)置正方形的寬度、高度、顏色等屬性，以下是一個簡單的樣式示例：

.square-container {
  display: flex;
}
.square {
  width: 50px; /* 正方形的寬度 */
  height: 50px; /* 正方形的高度 */
  background-color: #000; /* 正方形的背景顏色 */
}