Responsive 3*3 square div grid without scroll bars

Question

I want to have a responsive 9x9 div grid with no scrollbar. The div grid should resize according to the visible browser window. I've combined "How to maintain the aspect ratio of a div using only CSS" with "Grid of responsive squares":

html

<div class="stretchy-wrapper">
   <div class="inner">
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">
                       98%
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
       <div class="square">
           <div class="content">
               <div class="table">
                   <div class="table-cell numbers">               
                       3.9/5
                   </div>
               </div>
           </div>
       </div>
    </div>
</div>

css

@import url(http://fonts.googleapis.com/css?family=Lato:400,900);  /* <-- Just for the demo, Yes I like pretty fonts... */

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color:#1E1E1E;
    overflow:hidden;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}
.table{
    display:table;
    width:100%;
    height:100%;
}

body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#ECECEC;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

div.stretchy-wrapper {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;

    background: lightgrey;
}

div.stretchy-wrapper > .inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;

    color: white;
    font-size: 24px;
    text-align: center;
}

However the divs still get expanded to maximum width which causes scroll bars: Fiddle.

What is the css trick that the divs are only expanded to the maximum visible width or height? So I don't get scroll bars?

...just an idea: You can use "vh"/"vw" as size unit and "calc" as well in css, have you thought about that too? — Oops D'oh, Aug 09 '15 at 20:34
I've read about "vh/vw", but didn't know about "calc". Thanks for the suggestion, I'll have a look into it. — mles, Aug 09 '15 at 20:38
And I suggest to have a look at css display flexbox... sounds like a typical case to use it... — Oops D'oh, Aug 09 '15 at 20:40
If you want the divs 1) to be square, and 2) to fill the window either horizontally or vertically (depending on landscape or portrait), there's even a special unit for that: `vmin`. No calc needed — Mr Lister, Aug 09 '15 at 20:45

mles · Accepted Answer · 2015-08-19T23:19:51.070

Solved it with Flexbox and vmin

css

    .container {
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: space-around;

        height: 93vmin;
        width: 93vmin;
        background: lightgrey;
    }
    .cell {
        height: 30vmin;
        width: 30vmin;
        background-color:#1E1E1E;
    }

html

<div class="container">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>

    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>

    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
</div>

Full Screen Fiddle

Fiddle

Responsive 3*3 square div grid without scroll bars

1 Answers1