CODEWITHSUNDEEP
javascripthtmlcss
aerojas
aerojas

Reputation: 123

How to distribute a variable number of cards?

I'm trying to create a card game, like a trivia. The quantity of cards is configurable (between 1 and 9). One of the requirements is that the cards must be "centered". That means they are distributed around a center point (but not like a circle), evenly spaced between parent borders and themselves, etc. An idea of how I think the distribution could be is Card distribution model

I'm using almost vanilla elements - just Node and Webpack, no frameworks/libraries. I've thought of using CSS Grid, but if you see the image, it looks clearly that a 3x3 grid wouldn't work - cards should be put in the corners, which means that cards would be too far from the center, and the "ideal" position for 4 cards would overlap grid lines. Also I could calculate the position for each card in JS, but that would be reinventing the wheel, maybe? As far as I know, calculations can be performed by CSS, so there should be another way without manual calculations.

I've tried to use grid, but it seems that it only can provide so much flexibility - maybe using a finer grid could help but I don't know if it is the best option.

I just need some ideas of how I can approach it, or at least the correct search terms - almost all the cases I've found are for gallery-style distributions, like a typical grid. I can provide code if you want, but just pointing in the right direction would help too. Thanks in advance.

EDIT: Broken image link

Upvotes: 1

Views: 885

Answers (2)

Mathias W
Mathias W

Reputation: 1521

If the goal is the layout/distribution seen in your image then you could make use of flexbox and almost get it correct out of the box, with only the "board" with 4 cards (2x2) needing a workaround. So for the 2x2 you would just need to apply the extra class to the element when creating it.

Fiddle: http://jsfiddle.net/2bn3prmq/

* {
    box-sizing: border-box;
}

.board {
    display: flex;
    width: 400px;
    height: 210px;
    justify-content: space-evenly;
    align-items: center;
    border: 1px solid;
    flex-wrap: wrap;
    float: left;
}

.board-4 {
   padding: 0px 20px; 
}

.card {
    background: #a20;
    width: 100px; 
    height: 50px;
    flex-shrink: 0;
    margin: 10px;
}
<div class="board">
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board board-4">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>
<div class="board">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

Upvotes: 3

lorenzw
lorenzw

Reputation: 396

Bootstrap's grid should work just fine. You do not even need to define fixed rows, just write 

<div class="row justify-content-center>
<div id="card1" class="col-4"></div>
//As many cards as you want
</div>

Since bootstraps grid relies on flexbox (i think) you should be able to build similar behaviour with native css

Upvotes: 0

Related Questions