ボタンの幅がgridを使用しているため縦に長くなってしまっているのを解決したい

Question

実現したいこと

・募集部活動検索
・申請中の学校・部活動一覧
こちらのボタンが縦に長くなっているのを解決したいです

前提

理想はCommingSoonの下の余白を上の余白と同じ余白にしたい

該当のソースコード

<div id="<%= dom_id instructor %>">
  <div class="profile_container_action">
    <div class="profile_action">
      <h4 class="profile_action_mypage">マイページ</h4>
      <div class="profile_action_application_comming">
        <%= link_to '募集部活動検索', my_coach_requests_for_instructor_coach_requests_path, class: 'profile_account_edit', disabled: true %>
        <p class="comming">Comming Soon</p>
      </div>
      <div class="profile_action_application_comming">
        <%= link_to '申請中の学校・部活動一覧', my_coach_requests_for_instructor_coach_requests_path, class: 'profile_account_edit', disabled: true %>
        <p class="comming">Comming Soon</p>
      </div>
      <div class="profile_action_application">
        <%= link_to '日程が確定した学校・部活動', my_coach_requests_for_instructor_coach_requests_path, class: 'profile_account_edit' %>
      </div>
    </div>
    <div class="profile_container">
      <h4 class="profile_title">指導員プロフィール</h4>
      <p style="color: #9b3938"><%= notice %></p>
      <div class="profile_content">
        <div class="profile_item">
          <span class="profile_tag">NAME</span>
          <%= instructor.name %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">SCHOOL NAME</span>
          <%= instructor.school_name %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">EMAIL</span>
          <%= instructor.email %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">CAREER</span>
          <%= instructor.career %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">COACH CAREER</span>
          <%= instructor.coach_career %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">BIRTHDAY</span>
          <%= instructor.birthday %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">TELEPHONE NUMBER</span>
          <%= instructor.telephone_number %>
        </div>
        <div class="profile_item">
          <span class="profile_tag">CLUBS</span>
          <%= instructor.clubs.map(&:name).join(', ') %>
        </div>
      </div>
      <div class="profile_action_content">
        <%# <%= button_to "アカウント削除", @instructor, method: :delete, class: "profile_account_delete" %>
        <%= link_to "編集", edit_instructor_path(@instructor), class: "profile_account_edit"%>
      </div>
    </div>
  </div>
</div>

.profile_container_action {
  display: flex;
  justify-content: space-around;
  /* align-items: center; */
}

@media screen and (max-width:768px) {
  .profile_container_action {
    display: block;
    margin: 24px;
  }
}

.profile_container {
  display: grid;
  margin: 24px;
}

.profile_title {
  font-size: 32px;
  margin: 18px;
}

@media screen and (max-width:768px) {
  .profile_title {
    font-size: 24px;
    text-align: center;
    margin: 0;
  }
}

.profile_content {
  width: 600px;
}

@media screen and (max-width:768px) {
  .profile_content {
    width: auto;
  }
}

.profile_item {
  display: grid;
  gap: 4px;
  margin: 14px 0px;
  border-bottom: 1px solid #666666;
  padding: 12px 0px;
}

span.profile_tag {
  font-size: 12px;
  color: #666666;
  font-weight: bold;
}

.profile_action_content {
  display: flex;
  justify-content: flex-end;
}

.profile_account_delete {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  color: #666666;
}

.profile_account_edit {
  padding-right: 8px;
  color: #333;
  text-decoration: none;
}

.profile_action {
  display: grid;
  
  gap: 32px;
  
}

@media screen and (max-width:768px) {
  .profile_action {
    padding: 18px;
  }
}

.profile_action_mypage {
  font-size: 32px;
}

.profile_action_application_comming {
  display: inline-block; /* inline-blockに変更 */
  position: relative; /* 相対位置に設定 */
  padding: 18px 114px;
  border: 3px solid #333;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer; /* カーソルをポインターに変更 */
  text-align: center; /* テキストを中央揃えに変更 */
  text-decoration: none; /* テキストの下線を削除 */
  overflow: hidden; /* 親要素からはみ出さないようにする */
  box-shadow: 10px 10px 0px -5px #333;
}

.profile_action_application {
  display: inline-block; /* inline-blockに変更 */
  position: relative; /* 相対位置に設定 */
  padding: 28px;
  border: 3px solid #333;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer; /* カーソルをポインターに変更 */
  text-align: center; /* テキストを中央揃えに変更 */
  text-decoration: none; /* テキストの下線を削除 */
  overflow: hidden; /* 親要素からはみ出さないようにする */
  box-shadow: 10px 10px 0px -5px #333;
}

.profile_action_application:hover {
  background-color: #ede9e9;
}

@media screen and (max-width:768px) {
  .profile_action_application_comming {
    padding: 12px;
    width: auto;
    font-size: 14px;
  }
}

@media screen and (max-width:768px) {
  .profile_action_application {
    padding: 24px;
    width: auto;
    font-size: 14px;
  }
}

p.comming {
  margin: 0;
}

label.instructor_checkbox {
  display: flex;
  align-items: center;
  font-size: 15px;
}

Gridを使用して実装使用としましたがわからず教えていただけますと幸いです。
よろしくお願い致します。

Answer 1

　pecmm さんのご回答の通りなのですが、補足します。

.profile_action_application_comming {
  display: inline-block; /* inline-blockに変更 */

となっていますが、

.profile_action {
  display: grid;

としているため、上手く動作しません。

　グリッドレイアウトの直接の子要素（グリッドアイテム）は、インラインレベルボックスであっても「ブロック化（Blockification）」されます。

参考：　

If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is grid or inline-grid, the element’s own display value is blockified.
6.1. Grid Item Display | CSS Grid Layout Module Level 1

　

Some layout effects require blockification or inlinification of the box type, which sets the box’s computed outer display type to block or inline (respectively).
...
For legacy reasons, if an inline block box (inline flow-root) is blockified, it becomes a block box (losing its flow-root nature). For consistency, a run-in flow-root box also blockifies to a block box.
2.7. Automatic Box Type Transformations | CSS Display Module Level 3

Comments

[tyosu111]

Lhankor_Mhy様
補足ありがとうございます。
これらを踏まえまして、学んでいけたらと思います。
どうか今後ともよろしくお願い申し上げます。

Answer 2

おそらく当該gridに対するブロック軸上配置のスタイル指定がなく、デフォルトでalign-items: stretchの挙動になっているのだと思います。

https://developer.mozilla.org/ja/docs/Web/CSS/align-items
説明がちょっとややこしいので、上記MDNページの「試してみましょう」で
stretchとかcenterとかstartを選んでみてください。

実際のcssでstretch以外の値を指定すれば、内側のコンテンツに合わせた高さで指定の位置に描画されるはずです。

---

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout
grid内配置の詳細は上記MDNページが参考になります。

また、モダンなブラウザの開発者ツールであれば、指定のgirdやflexの補助線を表示する機能等がついていたりします。
これらを駆使して色々試して確認しながら調整するときっとよい感じになるでしょう

Comments

[tyosu111]

ご丁寧な回答ありがとうございます。
また参考URLも大変ありがとうございます！
引き続きよろしくお願い致します！！！