Html 以网格格式显示复选框

我想以网格格式显示包含3列的复选框。像下面这样

项目1项目2项目3
项目5项目6
4
项目7项目8项目9

我能够用下面的代码以网格格式显示它，但对于第7项，它并没有正确定位，而是开始在第5项下显示它。我不想这样

下面是我正在使用的代码

<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

{{x}

我还尝试用ul替换div，并且您可以使用flexbox 请注意，您应该避免使用内联样式！创建一个

style.css

文件，将其链接到

并粘贴到以下代码中：

.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

试试看

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9

表单{
宽度：60px；
显示：网格；
栅隙：10px；
网格模板柱：1fr 1fr 1fr；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9

但是如果我有更多的物品，它将如何工作？项目的数量可以是任何内容。有什么解决方案吗？如果你可以有任意数量的项目，并希望它们3宽，我认为flexbox将是你最好的选择，如果你这样做了，但由于我有这些复选框在一个手风琴，将只显示在折叠后。当我添加这个CSS时，放在下面的手风琴不会向下移动。你可以在每个复选框上尝试

flex-basis:33%