Make CSS Grid item (that wraps) span full width of container? - html

Question

If I have one grid item (child) it spans 100% of it's container. If I add another, they'll be 50% and side by side (as intended).
If I add another, so it wraps, it stays at 50%, aligning with the first child above. Is it possible for this item to span the width of the container unless another item is added to the grid?
The reason I'm using grid is because I have these responsive/scalable flip/flashcards on click. So if the heights vary they still align nicely (code included).
Also a CodePen which might be easier to view due to viewport width: https://codepen.io/moy/pen/JjvPRgz
It this possible or would I need to compromise/look at a solution using flex maybe?
$('.flashcard').click(function() {
$(this).toggleClass('flipped');
});
/**
* Mixin
*/
/**
* Properties
*/
:root {
--btn-primary-bg: rgb(41, 174, 229);
--btn-primary-color: rgb(255, 255, 255);
--btn-primary-box-shadow: inset -8px -4px 0 rgba(0, 0, 0, 8%), 2px 2px 0 rgba(0, 0, 0, 8%);
--btn-primary-text-shadow: 1px 1px 0 rgba(0, 0, 0, 24%);
}
/**
* Base
*/
body {
box-sizing: border-box;
font-family: helvetica;
margin: 0 auto;
padding: 24px;
max-width: 800px;
}
h4, p {
font-size: 14px;
margin: 0;
padding: 0;
}
/**
* Flashcards
*/
.flashcard-wrap {
display: grid;
grid-template-columns: 1fr;
grid-gap: 12px;
grid-auto-rows: 1fr;
margin-bottom: 24px;
}
#media (min-width : 64em) {
.flashcard-wrap {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
}
.flashcard {
cursor: -webkit-grab;
cursor: grab;
display: flex;
perspective: 40rem;
transition: z-index, transform 0.24s;
transition-delay: 0.24s, 0s;
z-index: 0;
}
.flashcard.flipped {
transition-delay: 0s;
z-index: 1;
}
.flashcard:active {
cursor: -webkit-grabbing;
cursor: grabbing;
transform: scale(0.8);
}
.flashcard :last-child {
margin-bottom: 0;
}
.flashcard .bubble {
margin-bottom: 12px;
}
.flashcard__inner {
display: flex;
flex: 1;
transform-style: preserve-3d;
transition: 0.24s transform;
}
.flashcard.flipped .flashcard__inner {
transform: rotateX(-180deg);
}
.flashcard__front,
.flashcard__back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-color: white;
box-sizing: border-box;
padding: 1.5rem;
border-radius: 0.25rem;
background: var(--btn-primary-bg);
box-shadow: var(--btn-primary-box-shadow);
backface-visibility: hidden;
border-radius: 12px;
box-sizing: border-box;
color: var(--btn-primary-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 24px;
min-width: 100%;
}
.flashcard__back {
transform: rotateX(-180deg) translate(-100%, 0);
}
.flashcard__back--left-align {
align-items: flex-start;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flashcard-wrap">
<div class="flashcard">
<div class="flashcard__inner">
<div class="flashcard__front">
<h4 class="flashcard__title">Heading #1</h4>
</div>
<div class="flashcard__back">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
<div class="flashcard">
<div class="flashcard__inner">
<div class="flashcard__front">
<h4 class="flashcard__title">Heading #2</h4>
</div>
<div class="flashcard__back">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="flashcard">
<div class="flashcard__inner">
<div class="flashcard__front">
<h4 class="flashcard__title">Heading #3</h4>
</div>
<div class="flashcard__back">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>

Answer 1

Wanna show the divs beside together?
you can use flex-wrap property for container and set it to nowrap as the default is.
Hope it was helpful.

Answer 2

This is possible with CSS alone. You do not need to change much of your existing code – just tweaking your grid for desktop and adding an extra line.
As you want two columns in your grid when there is more than one card we can simplify your grid so it is fixed to two columns. The only time a card needs to span the whole width of the container is if there are an odd number of flashcards (including when there is just a single flashcard). You also know you only want the last flashcard to span the whole width. On that basis we target each of those in order. To your flashcard-wrap class you need to add the following:
.flashcard-wrap {
//existing code
#include bp(bp5) {
grid-template-columns: repeat(2,1fr); // change to existing code so we always have two columns available.
& > *:nth-child(odd):last-child { // this will target the last flashcard but only if there are an odd number of cards - that includes the situation of there only being one card
grid-column: span 2;
}
}
}
NB: I have used the universal selector * as that will give you the flexibility to add different elements there if you need to. You can just as easily swap out * for .flashcard though if you only want the rule applied to flashcards.