CSSグリッドの行内にカードを展開する

Question

私はビューポートのサイズと行の数に応じて1〜4列のレスポンシブCSSグリッドに取り組んでいます。各グリッドボックス（マテリアルスタイルのカード）のコンテンツはオンデマンドで展開し、より多くのデータを表示します。 1つの列（電話機サイズの画面）しかない場合はすべてが完全に機能しますが、複数の列に展開されるとすぐに私はまだ分かりません。

1つのカードをクリックしてデータを展開すると、同じ行の他のすべてのカードが展開され、行の高さ全体が満たされます。それはちょうど悪く見え、意図したカードの動作ではありません。私がむしろ持っているのは、カードのためのものです。NOTクリックされたカードだけが展開されている間は、元のサイズに維持されます。

私は最初にdisplay: flexでこれを実装しようとしましたが、私が望む動作を得ることができませんでした。私はフレックス・ソリューションがあればオープンしています。

以下は関連するHTML、CSS、jQueryです。完全な例はCodePen：https://codepen.io/davewiard/pen/eydPojにもあります。

var $cell = $(".card"); 
 

 
//open and close card when clicked on card 
 
$cell.find(".js-expander").click(function() { 
 
    var $thisCell = $(this).closest(".card"); 
 

 
    if ($thisCell.hasClass("is-collapsed")) { 
 
    $cell 
 
     .not($thisCell) 
 
     .removeClass("is-expanded") 
 
     .addClass("is-collapsed") 
 
     .addClass("is-inactive"); 
 
    $thisCell.removeClass("is-collapsed").addClass("is-expanded"); 
 

 
    if ($cell.not($thisCell).hasClass("is-inactive")) { 
 
     //do nothing 
 
    } else { 
 
     $cell.not($thisCell).addClass("is-inactive"); 
 
    } 
 
    } else { 
 
    $thisCell.removeClass("is-expanded").addClass("is-collapsed"); 
 
    $cell.not($thisCell).removeClass("is-inactive"); 
 
    } 
 
}); 
 

 
//close card when click on cross 
 
$cell.find(".js-collapser").click(function() { 
 
    var $thisCell = $(this).closest(".card"); 
 

 
    $thisCell.removeClass("is-expanded").addClass("is-collapsed"); 
 
    $cell.not($thisCell).removeClass("is-inactive"); 
 
});

/* 
 
* site-wide styling 
 
*/ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
/* 
 
* header styling 
 
*/ 
 
#title { 
 
    font-family: "Expletus Sans", "Roboto", sans-serif; 
 
    text-transform: uppercase; 
 
} 
 

 
/* 
 
* content styling 
 
*/ 
 
hr { 
 
    border: 0.5px solid green; 
 
    margin: 10px 0; 
 
} 
 

 
/* 
 
* upper card styling 
 
*/ 
 
.container { 
 
    display: grid; 
 
    grid-template-columns: 1fr; 
 
    grid-template-rows: fit-content; 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
    .container { 
 
    grid-template-columns: repeat(2, 1fr); 
 
    } 
 
} 
 

 
@media screen and (min-width: 1050px) { 
 
    .container { 
 
    grid-template-columns: repeat(3, 1fr); 
 
    } 
 
} 
 

 
@media screen and (min-width: 1400px) { 
 
    .container { 
 
    grid-template-columns: repeat(4, 1fr); 
 
    } 
 
} 
 

 
.card { 
 
    background-color: #e0e0e0; 
 
    max-width: 100%; 
 
    min-width: 300px; 
 
    margin: 10px; 
 
    padding: 16px; 
 
    border-radius: 5px; 
 
    color: #212121; 
 
} 
 

 
/* 
 
* lower/expanding card styling 
 
*/ 
 
.card.is-collapsed .card--expander { 
 
    max-height: 0; 
 
    min-height: 0; 
 
    overflow: hidden; 
 
    margin-top: 0; 
 
    opacity: 0; 
 
} 
 

 
.name { 
 
    grid-column: 1/span 2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    
 
    <div class="card [ is-collapsed ]"> 
 
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div> 
 
    <div class="card--expander [ js-collapser ]"> 
 
     <hr /> 
 
     <div class="card--expander--info--container"><span class="name">Name</span></div> 
 
    </div> 
 
    </div> 
 
    
 
    <div class="card [ is-collapsed ]"> 
 
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div> 
 
    <div class="card--expander [ js-collapser ]"> 
 
     <hr /> 
 
     <div class="card--expander--info--container"><span class="name">Name</span></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="card [ is-collapsed ]"> 
 
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div> 
 
    <div class="card--expander [ js-collapser ]"> 
 
     <hr /> 
 
     <div class="card--expander--info--container"><span class="name">Name</span></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="card [ is-collapsed ]"> 
 
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div> 
 
    <div class="card--expander [ js-collapser ]"> 
 
     <hr /> 
 
     <div class="card--expander--info--container"><span class="name">Name</span></div> 
 
    </div> 
 
    </div> 
 

 
    <div class="card [ is-collapsed ]"> 
 
    <div class="card--upper [ js-expander ]"><div class="symbol">Title</div></div> 
 
    <div class="card--expander [ js-collapser ]"> 
 
     <hr /> 
 
     <div class="card--expander--info--container"><span class="name">Name</span></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなただけのフレキシボックス上のようなアライメントの設定を使用することができます。 フレックスボックスとグリッドの両方のデフォルト値はstretchです。予期しないことがあります。

.container {align-items: start;}のいずれかです。 flex-startも実際に動作します。 （すべてのブラウザが同じ値をサポートしているかどうかはわかりません）