Keep aspect ratio of divs inside a grid

Question

I am creating memory game. I am using 24 cards in aspect of 6:4, i e. 4 rows with six cards in each row.

Here is picture what i want to achieve and what I have on my screen resolution:

What I have and what I want to achieve

And here is picture what happens on different resolution

Position of cards on other resolution

Here is css code that I am using:

#board{
padding: 5px;
background-color:#cccccc;
width:70%;

#board > div {
        background-color: grey;
        border:#000 1px solid;
        width:71px;
        height:81px;
        float:left;
        margin:20px;
        padding:10px;
        font-size:64px;
        cursor:pointer;
        box-shadow: 0px 5px 14px grey;
        border-radius: 5px;
        transition: 0.2s;
    }

#board > div:hover {
    box-shadow: 0px 0px 25px black;
    transition-timing-function: all ease-in-out;

}

It's because of the float. When you float elements, it pushes them as far left(or right) as they will fit, then move them to a new line when it won't. You must keep the parent container at a fixed width, enough to encompass 6 of your cards on one line. — Kyle, May 26 '14 at 12:54
try using relative width, although you have to recalculate it each time your change the number of cells per row. However if using script, that will be done automatically for you. — King King, May 26 '14 at 12:58
Like Kyle Said, simply have a parent container that acts as a row for each six boxes.. — T J, May 26 '14 at 13:00

web-tiki · Accepted Answer · 2014-05-26T21:14:46.273

3

Here is a responsive grid of 4*6 blocks with

fluid widths/heights
fluid margins
fixed aspect ratio

DEMO

HTML :

<div>
    <div class="card"></div>
    <div class="card"></div>
    ...
</div>

CSS :

.card{
    width: 16%;
    padding-bottom:24%;
    margin:0.3%;
    border:1px solid #000;
    background:grey;
    float:left;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    border-radius:10px;
}

edited May 26 '14 at 21:14

answered May 26 '14 at 13:11

web-tiki

99,765
32
217
249

seems more correct than my answer, since the aspect ratio is really maintained- – Nico O May 26 '14 at 13:13
@NicoO thx but I am doubting it is the right one needed by the OP I can't depict wether the aspect ratio must be maintained for the container or for the cards... – web-tiki May 26 '14 at 13:14
i guess keeping the cards aspect ratio is needed, i turned wrong ;) – Nico O May 26 '14 at 13:15

score 2 · Answer 2 · answered May 26 '14 at 13:06

If you know the amount of cards you want to display max, you can just calculate the desired with and height with css. Here is one example with 6x4 cards.

http://jsfiddle.net/2R4Qk/2/

CSS:

/* add border + padding to width */
*
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
    padding:0;
    margin:0;
}

.deck
{
    height: inherit;
    margin:0;
}

/* change the 6 to desired column/row count */
.deck .card
{
    width: calc(100% / 6 - 10px);
    height: calc(100% / 4 - 10px);
    margin: 5px;
    background-color: silver;
    border-radius: 4px;
    border: 1px solid gray;
    float: left;
}

HTML:

<div class="deck">
    <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 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 class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>

</div>

you welcome, glad you found a solution working for you – Nico O May 26 '14 at 13:38 — Nico O, May 26 '14 at 13:38

score 0 · Answer 3 · answered May 26 '14 at 13:06

0

Multiple ways to do this. I would recommend wrapping each six DIVs in an outer div. You would however need to change your CSS selectors to something like this:

#board > div > div

Placing br elements after every six DIVs would probably work as well.

answered May 26 '14 at 13:06

Eugen Timm

744
6
13

score 0 · Answer 4 · answered May 26 '14 at 13:24

0

As an alternative to putting every row of cards inside a container, I'd like to mention that you could also clear after every 6th card element with reasonably simple CSS.

#board > div:nth-child(6n+1) {
    clear: both;
}

Note that this doesn't prevent the cards from wrapping if the #board becomes too small. Just wanted to throw it out there as an addition, in case you want to keep the CSS for the cards the way it is.

answered May 26 '14 at 13:24

oelna

2,210
3
22
40

Also, I added `overflow: hidden;` to the `#board` CSS in order to make it wrap the floated elements correctly. – oelna May 26 '14 at 13:27

Keep aspect ratio of divs inside a grid

4 Answers4