1

I'm made a memory game with some php and javascript, now I'm having trouble with wrapping the carddeck. Please take a look at the image in the link below.

Image: https://i.stack.imgur.com/ZNRph.png

.card-container {
      display: inline-block;
      width: 128px;
      heigth: 128px;
    }
 <div class="carddeck" id="carddeck">
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
      <div class="card-container">card</div>
   
    </div>

As you can see, the width of the carddeck (marked in blue), is the width of the screen (100%). Is there a way in CSS to make the carddeck wrap around the cards without the space where no cards are (on the right)?

To visualize what I want, please look at this image: https://i.stack.imgur.com/zjzhA.png

Imagine that the carddeck's width is equal to where the orange line is in the 2nd image. When wrapped nicely, I can do a simple margin-left: auto; and margin-right: auto; to horizontally center the carddeck.

Thanks in advance,

-Ed

EdKorket
  • 48
  • 12
  • 1
    Welcome to Stack Overflow! Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Gerardo BLANCO Feb 14 '18 at 18:19
  • you can check above links for more details and some workarounds ;) – Temani Afif Feb 14 '18 at 19:31

0 Answers0