チェックボックスを２列で表示させたい

Question

やりたいこと

• 以下の画像のようにの画像のようにチェックボックスを２列で表示させたい

試したこと

• eachで生成したチェックボックスに以下のスタイルを当てているが、画像のようになる。

label {
  display:inline-flex;
  float: left;
  margin: 6px 0;
}

<?php foreach( $themes as $key => $val ) : ?>
  <label>
    <?php
      echo "<input type=\"checkbox\" name=\"mt[themes][]\" value=\"{$val}\" {$checked} >";
      echo "<p>$key</p>"
    ?>
  </label>
<?php endforeach; ?>

お知恵をお貸しください。よろしくお願いいたします。

Answer 1

親が.containerとして

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Answer 2

箱をつくってその幅の半分未満のwidthをlabelに指定してみては？

<style>
#hoge{width:500px;}
#hoge label{width:240px;display:inline-block;}
</style>
<div id="hoge">
<label><input type="checkbox">aaa1</label>
<label><input type="checkbox">bbbbbb2</label>
<label><input type="checkbox">cc3</label>
<label><input type="checkbox">ddddd4</label>
<label><input type="checkbox">eeeee5</label>
<label><input type="checkbox">f6</label>
</div>