살롱의 공동 개발로 블로그 앱을 만들 때 Bootstrap의 card를 이용했습니다.
Card를 PC에서는 3열, 태블릿에서는 2열, 스마트폰에서는 1열로 하고, Card의 중앙 맞춤 표시에 고전했기 때문에, 비망록으로서 남깁니다.

개발 환경

· 루비 2.7.2
· rails 6.1.1
· bootstrap 4.5.1

처음 구현한 코드

index.html.erb

<div class="base-container mw-xl">
<div class="texts-wrapper">
  <div class="contents-title text-center">
    <h3>タイトル</h3>
    <div class="row justify-content-center">#左右中央揃え
      <div class="card-deck">#カード型デザインの横並びになっている要素の高さ調整を自動化
        <% @texts.each do |text| %>
          <div class="col-12 col-md-6 col-lg-4 text-card-container">#グリッドブレークポイントを定義
            <div class="card content-card border-dark">#カードに黒枠を追加
              <div class="card-header p-0">
              <img class="card-img-top" src="https://picsum.photos/30/20.jpg" alt="画像">
              </div>
              <div class="card-body d-flex align-items-center">
                <p class="card-title text-left">Card title</p>#テキストタイトルを左寄せ
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
</div>

application.scss

#元々のテキストサイズを参考に、カードの幅を決める
div.text-card-container {
  padding-left: 9px;
  padding-right: 9px;
  margin-bottom: 50px;
}

div.content-card {
  height: 350px;
  max-width: 360px;
  margin: 0 auto;
}

외형

PC 사이즈


태블릿 크기


잘 보면, 좌우의 폭이 갖추어지지 않는다‥

스마트폰 사이즈


이 사이즈로, 중앙 맞추어지지 않은‥
(2번째의 코드 리뷰에서도, 잘 수정이 되어 있지 않았습니다. 코드 리뷰 해 주신 멘토에게 죄송합니다‥ )

여러가지 기능을 붙이고 있는 것은? 라고 생각해, 심플하게 재검토했습니다.

수정된 코드

index.html.erb

<div class="texts-wrapper">
   <div class="contents-title text-center">
     <h3>タイトル</h3>
     <div class="row">
       <% @texts.each do |text| %>
         <div class="col-12 col-md-6 col-lg-4">
           <div class="card">
             <img class="card-img-top" src="https://picsum.photos/30/20.jpg" alt="画像">
               <div class="card-body">
                 <p class="card-title">Card title</p>
               </div>
           </div>
         </div>
       <% end %>
     </div>
   </div>
 </div> 

application.scss

.card {
  margin: 0 auto 60px;
  max-width: 376px;
  height: 370px;
}
.card-body p {
  text-align: left;

외형

PC 사이즈


태블릿 크기


스마트폰 사이즈


스마트 폰 크기에서도 제대로 Card가 중앙 정렬로 수정되었습니다.

지금 정리하면서 깨달았지만,

<div class="texts-wrapper">
   <div class="contents-title text-center">
     <h3>タイトル</h3>
   </div>

이 모양이 자연스러웠습니까? ? 가나라고 느꼈습니다. 여러가지 코드를 쓰면서 익히고 싶습니다. 외형도 아름다운 코드가 읽기 쉽습니다.

요약

이번에, 좌우 중앙 정렬 등의 코드를 여러가지 담아, CSS의 코드로 Card폭을 고정한 것도, 잘 표시된 원인이라고 생각합니다. 코드를 만들 때는 때로는 뺄셈도 중요하다고 배웠습니다.
또, 이번 수정한 코드 이외에서도, 구현은 가능합니다. (공동 개발 멤버는 다른 코드를 짜서 같은 방식으로 표시되었습니다.)

나와 같이 고전하고 있는 분들의 참고가 되면 좋다고 생각해, 기사에 정리해 보았습니다.
기사의 감상이나 의견, 어드바이스등 있으면, 코멘트해 주실 수 있으면 다행입니다.
끝까지 읽어 주셔서 감사합니다.

참고 기사 & 사용 이미지:

【공식】Bootstrap Cards

【공식】Bootstrap Grid system

Lorem Picsum
→「일단 화상을 넣는」툴입니다. 포트폴리오 등을 작성할 때, 「이미지를 넣고 싶지만 아직 정해져 있지 않다」, 빈 공간에서는 이미지가 붙지 않을 때 등에 편리한 툴입니다. 참고까지 소개했습니다.