我需要帮助来创建网格 lex 布局 (CSS\SCSS)

Question

我在网站中布局一个框时遇到问题...

我想构建一个900x900像素大小的box，并将物品放入其中，当我达到900的高度限制时，它将被分成两列 附图片解释:)请帮我解决CSS代码

<div class="box" id="">
    <div class="element" id="">1</div> 
    <div class="element" id="">2</div> 
    <div class="element" id="">3</div> 
    <div class="element" id="">4</div> 
    <div class="element" id="">5</div> 
    <div class="element" id="">6</div> 
    <div class="element" id="">7</div> 
    <div class="element" id="">8</div>
    ......
</div>
CSS
.box {
  width: 900px;
  height: 900px;
}
.element {
width: 70px;
height: 70px;
}

尝试使用 Flex 和网格显示，但没有成功

Answer 1

您可以结合使用 Flexbox 和 CSS 网格。这是您更新的代码：

.box {
  width: 900px;
  max-height: 900px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  border: 1px solid #000;
}

.element {
  width: calc(50% - 10px); /* Adjust the width and margin as needed */
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

<div class="box" id="">
    <div class="element" id="">1</div> 
    <div class="element" id="">2</div> 
    <div class="element" id="">3</div> 
    <div class="element" id="">4</div> 
    <div class="element" id="">5</div> 
    <div class="element" id="">6</div> 
    <div class="element" id="">7</div> 
    <div class="element" id="">8</div>
    <!-- ... other elements ... -->
</div>