募集:行ごとに同じ高さのグリッド「セクション」を有効にする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
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...
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
高さが等しくなります。
スタックスニペット
.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]
コメントを追加