実現したいこと
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}
試したこと・調べたこと
上記の詳細・結果
原因：子要素にcssを効かせてしまっている。
解決方法：子要素＜div test＞を作成し、子要素を作成。
原因：htmlで配列を表示させているが上手くclass名を命名できていないから起きている？
検証した際のページ
https://gyazo.com/4742794a28cfa6f5eca185408546b539
補足
railsをメインとして学習中の為、他にもアドバイスありましたらご教授いただければ幸いです
0 コメント