カテゴリーの並びを綺麗にしたい

Question

現状のカテゴリーのならび

こちらのカテゴリーの頭を綺麗にしたいと思っています

コード

.users_signup__input_items_container
    - Sector.all.each do |sector|
        label.users_signup__checkbox_container
           = f.label :sector_ids, value: sector.id, class: '' do
           = f.check_box :sector_ids, { multiple: true, class: :users_signup__checkbox }, sector.id, nil
           = sector.name

.users_signup__input_items_container {
  margin-top: 12px;
  text-align: left;
}

.users_signup__checkbox_container {
  display: inline-block;
  padding-right: 52px;
}

.users_signup__checkbox {
  margin-right: 12px;
  margin-top: 24px;
}

gridを使用したけど慣れてなく、わからなかったです

箱みたいなイメージを200pxで二つ作って横並びにしたかったのですが、
できなくて教えていただけますと幸いです。
よろしくお願いいたします

os MacOS

Answer 1

display: grid;は整列させたい要素の親要素に設定します。下記でどうでしょう。

.users_signup__input_items_container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  margin-top: 12px;
  text-align: left;
}

Comments

[tyosu]

ご丁寧にありがとうございました。

親要素につけることで理想としているものになりました。
また何かありましたらよろしくお願いいたします。

Answer 2

gridレイアウトをつかうのがお勧めです。

CSS grid - Google 検索

Comments

[tyosu]

grid調べてみてとても便利そうだなと思いました。
もっと使いこなせるようにしようと思います。

gridをして変更したのですがわからずで教えていただけますと幸いです。

追記してありますので、よろしかったらお願いいたします。

[hatena19]

コンパイル後のHTMLコードと現状のCSSコードを質問に追記してもらえますか。