Erweitern von Karten innerhalb der CSS-Rasterzeile

Question

Ich arbeite an einem reaktiven CSS-Raster mit 1 bis 4 Spalten, abhängig von der Größe des Darstellungsbereichs und einer beliebigen Anzahl von Zeilen. Der Inhalt jeder Grid-Box (eine Material-Style-Karte) wird erweitert, um weitere Daten anzuzeigen. Alles funktioniert perfekt, wenn es nur eine Spalte gibt (Bildschirme in Telefongröße), aber sobald es auf mehrere Spalten erweitert wird, sehe ich ein Problem, das ich noch nicht ganz verstehe.

Wenn ich auf eine Karte klicke, um die Daten zu erweitern, wird jede zweite Karte in derselben Zeile erweitert, um die gesamte Zeilenhöhe zu füllen. Das sieht einfach schlecht aus und ist nicht das beabsichtigte Kartenverhalten. Was ich lieber hätte, ist, dass die Karten NICHT geklickt werden, um ihre ursprüngliche Größe zu behalten, während nur die angeklickte Karte erweitert wird.

Ich habe zuerst versucht, dies mit display: flex zu implementieren, aber ich konnte nicht das Verhalten, das ich wollte. Ich bin offen für eine Flex-Lösung, wenn es eine gibt.

Unten ist das relevante HTML, CSS und jQuery. Das vollständige Beispiel finden Sie auch unter 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

Sie können nur Ausrichtungseinstellungen verwenden wie auf Flexbox. Der Standardwert für Flexbox und Gitter ist stretch, was unerwartet sein kann.

Eine der Optionen .container {align-items: start;}. Flex-Start funktioniert auch so gut. (Ich bin nicht sicher, ob alle Browser die gleichen Werte unterstützen)