レスポンシブグリッドに「同じ高さ」の行セクションを設定するCSSのみのソリューション

ラッセルウィンボーン

募集:行ごとに同じ高さのグリッド「セクション」を有効にするCSSのみのソリューションであり、応答性もあります。

この図は、この投稿の言葉よりも要件をうまく説明していることを願っています。

役立つ図

「アイテムグリッド」はレスポンシブである必要があります。ビューポートの幅に基づいて、行ごとに異なる数のカードを表示できます。また、特定の行内で、同等のセクションは「行ごと」に同じ高さである必要があります。

以下のHTMLとCSSでは、アイテムカードは必要な行に分割されていますが(デスクトップとモバイルの2つのブレークポイントの例で)、コンテンツセクションの高さは可変です(うん):

.items {
  max-width: 1200px;
}

.item {
  width: 25%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}
<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>


  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

    
</div>

The following codepen is a JavaScript based solution that achieves the desired outcome - but is what I am trying to avoid: https://codepen.io/rusta/pen/KmbVKd

Limitations

  • The number of items to be displayed in the grid list can be any number from 1-150
  • The size of the item content to be displayed will be genuinely variable (so picking a "sensible" min-height is not an option)

I was hoping that the new CSS Grid system would help me achieve the above, but having played with it for a while it seems to need a bit more structure than I had hoped it would, and the responsive aspect seemed rather challenging. But maybe there is a CSS Grid based answer out there somewhere

Further note: I say a CSS only solution, by which I mean a non-JS solution. If the HTML blocks need to change (order/nesting/class names) to support a non-JS solution that is absolutely fine

In this trivial example - we are only focusing on the "content" section for having "matching heights" - as we can assume the heading and price sections will naturally be the same height. It would be nice to enable "equivalency" across any matching grid section (header/content/price/other) but that can be for another day...

Ason

By giving the .items display: flex; flex-wrap: wrap; your item will become flex items and flow from left to right and wrap when there is no more space.

次に、を指定します.item display: flex; flex-direction: column;。これにより、それらもフレックスコンテナになり、列方向を使用することで、その子はブロック要素のように垂直に流れます。

最後に、を指定します.item__content flex: 1;。これにより、残りのスペースを垂直方向に使用できるようになるため、すべての行のitem高さが等しくなります。

更新されたcodepen

スタックスニペット

.items {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}

.item {
  display: flex;
  flex-direction: column;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  padding: 0 12px;
  margin: 24px -4px 24px 0;
}

@media (max-width: 600px) {
  .item {
    width: 50%;
  }
}

.item__heading {
  background-color: #d4d0f5;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}

.item__content {
  flex: 1 1 auto;                   /* IE need 1 1 auto */
  padding: 10px;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}

.item__price {
  background-color: #e0f6d9;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbbbbb;
}
<div class="items">

  <div class="item">
    <div class="item__heading">
      Item 1
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 2
    </div>
    <div class="item__content">
      Some content that is longer than other items on the same row and sets the height of this section
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 3
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £69.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 4
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £109.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 5
    </div>
    <div class="item__content">
      Some content that is a medium kind of length blah blah
    </div>
    <div class="item__price">
      £29.99
    </div>
  </div>

  <div class="item">
    <div class="item__heading">
      Item 6
    </div>
    <div class="item__content">
      Some content that is not that long
    </div>
    <div class="item__price">
      £99.99
    </div>
  </div>

</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

レスポンシブグリッドに複数の「同じ高さ」の行セクションを設定するCSSのみのソリューション

分類Dev

垂直グリッドでdivを同じ高さにするCSSのみのソリューションはありますか?

分類Dev

レスポンシブ グリッドの列の高さを同じにする

分類Dev

同じ高さのボックスへのエレガントなソリューション

分類Dev

ボックスのコンテンツをレスポンシブグリッドに垂直に配置します(すべてのボックスに同じ高さを設定します)

分類Dev

同じデバイスに同じソリューションの複数のアプリバージョンをサイドローディングする

分類Dev

このjqueryコードをリファクタリングして、チェックされたオプションをカウントし、同じコードを繰り返さずにそれに応じてメッセージを設定する方法

分類Dev

Vue:レスポンシブナビゲーションを動的にレンダリングするメソッドを使用する場合の問題

分類Dev

別のプロジェクトで同じソリューションの画像にアクセスする

分類Dev

同じドメインでホストされている別のlaravelアプリケーションを介してphpアプリケーションのセッションにアクセスするにはどうすればよいですか?

分類Dev

複数のボックスシャドウを動的に追加する純粋なCSSソリューション

分類Dev

C#の同じソリューションで別のプロジェクトバッドからvbスクリプトを実行する

分類Dev

データフレーム内の行のサブセットに適用関数を使用する-ベクトル化されたソリューション

分類Dev

タイトルセクションの最初の行の高さを設定する方法は、jQueryDatatableのエクスポートに優れています

分類Dev

Puppeteerで要素のスクリーンショットの幅と高さを設定する

分類Dev

CSSグリッドテンプレートの列をレスポンシブに行に変換する方法

分類Dev

グループポリシー設定によるユーザーセッションのロックと終了

分類Dev

既存のレスポンシブナビゲーションメニューにドロップダウンリンクを追加する方法

分類Dev

グリッドビューページャーをテーブルのtfootセクションにレンダリングする

分類Dev

財務情報をExcelまたはGoogleスプレッドシートにインポートするための更新されたソリューション?

分類Dev

同じディレクトリ内の複数のExcelワークブックを更新するソリューションをお探しですか?

分類Dev

動的に含まれるテキストのdivのパーセンテージ幅を設定するための純粋なCSSソリューション

分類Dev

セレンPythonでスクリーンショットの高さを制限する方法は?

分類Dev

laravelブレードドロップダウンリストのオプションを設定する方法

分類Dev

内容に応じてセクション内のレスポンシブ段落のスタイルを動的に設定する

分類Dev

同じソリューションで最初のコンソールアプリによってトリガーされた2番目のコンソールアプリケーションをデバッグする

分類Dev

Angular 5でエラーが発生する-コンテンツセキュリティポリシー:ページの設定により、リソースの読み込みがブロックされました(「default-src」)

分類Dev

dotnet実行のソリューションにデフォルトプロジェクトを設定する

分類Dev

HTML-CSS-レスポンシブな同じサイズの画像グリッドにカーソルを合わせるとボックスが表示されます

Related 関連記事

  1. 1

    レスポンシブグリッドに複数の「同じ高さ」の行セクションを設定するCSSのみのソリューション

  2. 2

    垂直グリッドでdivを同じ高さにするCSSのみのソリューションはありますか?

  3. 3

    レスポンシブ グリッドの列の高さを同じにする

  4. 4

    同じ高さのボックスへのエレガントなソリューション

  5. 5

    ボックスのコンテンツをレスポンシブグリッドに垂直に配置します(すべてのボックスに同じ高さを設定します)

  6. 6

    同じデバイスに同じソリューションの複数のアプリバージョンをサイドローディングする

  7. 7

    このjqueryコードをリファクタリングして、チェックされたオプションをカウントし、同じコードを繰り返さずにそれに応じてメッセージを設定する方法

  8. 8

    Vue:レスポンシブナビゲーションを動的にレンダリングするメソッドを使用する場合の問題

  9. 9

    別のプロジェクトで同じソリューションの画像にアクセスする

  10. 10

    同じドメインでホストされている別のlaravelアプリケーションを介してphpアプリケーションのセッションにアクセスするにはどうすればよいですか?

  11. 11

    複数のボックスシャドウを動的に追加する純粋なCSSソリューション

  12. 12

    C#の同じソリューションで別のプロジェクトバッドからvbスクリプトを実行する

  13. 13

    データフレーム内の行のサブセットに適用関数を使用する-ベクトル化されたソリューション

  14. 14

    タイトルセクションの最初の行の高さを設定する方法は、jQueryDatatableのエクスポートに優れています

  15. 15

    Puppeteerで要素のスクリーンショットの幅と高さを設定する

  16. 16

    CSSグリッドテンプレートの列をレスポンシブに行に変換する方法

  17. 17

    グループポリシー設定によるユーザーセッションのロックと終了

  18. 18

    既存のレスポンシブナビゲーションメニューにドロップダウンリンクを追加する方法

  19. 19

    グリッドビューページャーをテーブルのtfootセクションにレンダリングする

  20. 20

    財務情報をExcelまたはGoogleスプレッドシートにインポートするための更新されたソリューション?

  21. 21

    同じディレクトリ内の複数のExcelワークブックを更新するソリューションをお探しですか?

  22. 22

    動的に含まれるテキストのdivのパーセンテージ幅を設定するための純粋なCSSソリューション

  23. 23

    セレンPythonでスクリーンショットの高さを制限する方法は?

  24. 24

    laravelブレードドロップダウンリストのオプションを設定する方法

  25. 25

    内容に応じてセクション内のレスポンシブ段落のスタイルを動的に設定する

  26. 26

    同じソリューションで最初のコンソールアプリによってトリガーされた2番目のコンソールアプリケーションをデバッグする

  27. 27

    Angular 5でエラーが発生する-コンテンツセキュリティポリシー:ページの設定により、リソースの読み込みがブロックされました(「default-src」)

  28. 28

    dotnet実行のソリューションにデフォルトプロジェクトを設定する

  29. 29

    HTML-CSS-レスポンシブな同じサイズの画像グリッドにカーソルを合わせるとボックスが表示されます

ホットタグ

アーカイブ