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

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 >
  <div >
    <div >
      <div >
        <h4 >Heading #1</h4>
      </div>
      <div >
        <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 >
    <div >
      <div >
        <h4 >Heading #2</h4>
      </div>
      <div >
        <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 >
    <div >
      <div >
        <h4 >Heading #3</h4>
      </div>
      <div >
        <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>

CodePudding user response：

This is possible with CSS alone. You do not need to change your existing code – you just need to add a couple more lines.

As you state you have two columns in your grid the only time a card needs to span the whole width of the container is if there are an odd number of flashcards. 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

    & > *:nth-child(odd):last-child {
       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.

CodePudding user response：

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.