想要使用网格在父div中设置div样式

Question

我需要以如下方式设计父div：

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

它应该看起来像这样：

|1|4|
|2|5|
|3|6|

此外，父div必须划分为列样式，其中1、2、3应按顺序出现在包装器div 的左侧，4、5、6应按顺序显示在右侧

Answer 1

这就是你想要的吗？

.parent {
column-count:2;
color:red;
column-gap:5px;

}

.number {
height:30px;
border:1px solid white;
text-align:center;
border:1px solid black;
}

.number:hover {
background-color:#fff; 
}

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

Answer 2

您可以使用这样的网格：-

.parent {
display: grid;
grid-template-rows: repeat(3, 20px);
grid-template-columns: repeat(2, 20px);
}

Answer 3

你是这样说的吗？

.parent {
display:grid;
grid-template-columns:auto auto auto;
color:red;
background-color:gray;
}

.number {
height:30px;
border:1px solid white;
text-align:center;
border:1px solid black;
}

.number:hover {
background-color:#fff; 
}

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