タイル型で要素を表示をさせたい

実現したいこと

grid-template-columnsメソッドを使用し、
横に要素が２つ並ぶ様に表示したい

発生している問題・分からないこと

grid-template-columnsメソッドを使用し、横に要素が２つ並ぶ様に表示したいのですが、縦一列となってしまいます。
下記の様に他のページでは理想的な実装ができたのですが、該当ページでは実装ができない為、質問させていただいております。
原因としてhtmlのページの配列をcssで上手く取得できていないからだと思っておりますが＜div＞等で囲う箇所や囲う方法等が分からない為、ご教授頂きたいです。
理想の形（できているページ）
https://gyazo.com/b4a0ede946b1f43d493cef0a6debfb5a
苦戦しているページ
https://gyazo.com/25a1e45f052189711949ddf5c90d56be

該当のソースコード

new.html.erb
1<%= render "shared/header" %>
2
3<body>
4  <div class='title'>
5    <div class='english-title'>
6      Ordr
7    </div>
8    <div class='japanese-title'>
9      商品注文
10    </div>
11  </div>
12  <section class='cart-form-content'>
13    <%= form_with model: @cart, local:true do |f| %>
14      <% if @favorite_list.present? %>
15        <div class='order-items-list'>
16          <div class='test'>
17            <% @favorite_list.each do |item| %>
18                <div class='item-img-content'>
19                  <%= image_tag item.image, class: "item-index-img" if item.image.attached? %>
20                </div>
21                <div class='item-name' >
22                  <%= item.name %>
23                </div>
24                <div class='item-order-price'>
25                  <%= item.price %>
26                </div>
27                <div class='order-price-money'>
28                  円
29                </div>
30                <%= f.fields_for :orders, @cart.orders.build do |order| %>
31                <div class="order-item-id-form">
32                  <%= order.hidden_field :item_id, :value => item.id %>
33                </div>
34                <div class="item-stock">
35                  <%= item.stocks.sum(:quantity) %>
36                </div>
37                <div class="order-quanty-form">
38                  <%= order.text_field :quanty, id:"order-quanty" %>
39                </div>
40                <div class="order-price-form">
41                  <%= order.text_field :price, id:"order-price" %>
42                </div>
43                <% end %>
44            <% end %>
45          </div>
46        </div>
47      <% end %>
48      <div class='cart-total'>
49        <div class="total-price">
50          合計
51          <%= f.text_field :price, id:"cart-price" %>
52        <div>
53        <div class="cart-form-btn">
54          <%= f.submit '登録', class: 'btn btn-primary' %>
55        </div>
56        <%= f.hidden_field :user_id, :value => current_user.id %>
57      </div>
58    <% end %>
59  </section>
60</body>

new.css
1.order-items-list {
2  display: grid;
3  grid-template-columns: repeat(2,1fr);
4  margin: 10px 0px 15px 120px;
5}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

原因：子要素にcssを効かせてしまっている。
解決方法：子要素＜div test＞を作成し、子要素を作成。
原因：htmlで配列を表示させているが上手くclass名を命名できていないから起きている？
検証した際のページ
https://gyazo.com/4742794a28cfa6f5eca185408546b539

補足

railsをメインとして学習中の為、他にもアドバイスありましたらご教授いただければ幸いです

行動規範の内容に同意します

回答2件

.order-items-list を display: grid でグリッドコンテナにし、grid-template-columns: repeat(2, 1fr) で列の数を2つに指定していると思います。原因としては、.order-items-list 内の各要素に適用されるスタイルが、グリッドの配置に影響を与えている可能性があります。そのため、内部の要素にも適切なスタイルを適用する必要があります。

一度トライしてみてください。

.order-items-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 10px 0px 15px 120px;
}

.order-items-list .test {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.order-items-list .item-img-content,
.order-items-list .item-name,
.order-items-list .item-order-price,
.order-items-list .order-price-money,
.order-items-list .order-item-id-form,
.order-items-list .item-stock,
.order-items-list .order-quanty-form,
.order-items-list .order-price-form {
  margin: 5px;
}

投稿2024/02/12 22:44

shoshinsha123

総合スコア213

takuya-siro

2024/02/13 11:59

ご回答いただきありがとうございます。解決いたしました。eachの要素を一括りにしたいときはeachの中をdivタグでくくるのですね。勉強になります。ご教授ありがとうございます。

takuya-siro

2024/02/13 12:05

申し訳ありません。回答と間違えてコメントしてしまいました。前の方の解決方法にて解決した為、前の方の回答をベストアンサーにさせて頂きます。ご回答いただき誠にありがとうございます。

行動規範の内容に同意します

ベストアンサー

当方 Rails が全く分からないので的外れでしたらすみません。

      <% if @favorite_list.present? %>
        <div class='order-items-list'>
          <div class='test'>
            <% @favorite_list.each do |item| %>

            ...

                <% end %>
            <% end %>
          </div>
        </div>

となっており、if や each do の閉じタグと div の閉じタグとの順序が整合していないように思います。

また、each do の外に .test がありますから、商品の要素がいくつであろうと .test はひとつになります。そして、その中に全ての商品が入ることになりますが、これは想定されている通りでしょうか？

つまり、本来はこうすべきではないのかな、と想像しています。

      <% if @favorite_list.present? %>
        <div class='order-items-list'>
            <% @favorite_list.each do |item| %>
          <div class='test'>

            ...

          </div>
                <% end %>
        </div>
            <% end %>

訂正の追記

失礼しました。ループをひとつ見逃してました。

      <% if @favorite_list.present? %>
        <div class='order-items-list'>
          <div class='test'>
            <% @favorite_list.each do |item| %>
...
                <%= f.fields_for :orders, @cart.orders.build do |order| %>
...
                <% end %>
            <% end %>
          </div>
        </div>
      <% end %>

ということだったのですね。

そうすると、こうでしょうか。

      <% if @favorite_list.present? %>
        <div class='order-items-list'>
            <% @favorite_list.each do |item| %>
          <div class='test'>
...
                <%= f.fields_for :orders, @cart.orders.build do |order| %>
...
                <% end %>
          </div>
            <% end %>
        </div>
      <% end %>

投稿2024/02/13 02:57

編集2024/02/13 03:29