UPDATE : New Fiddle | FullScreen View
The code snippet provided demonstrates the creation of a grid with dimensions of 3x3, consisting of 9 div elements (with 8 cloned using jQuery). The horizontal alignment of the grid has been achieved successfully, but vertical alignment is yet to be implemented. Any relatively simple CSS solutions for vertical centering would be greatly appreciated.
In addition, the use of !important in the CSS styling for defining min-height and min-width properties of div#game1 is currently necessary, although not ideal. Are there alternative methods that can be employed to address this issue?
LATEST UPDATE: Revised Code
jQuery
(function($) {
var $game1 = $('div#game1');
var $game2 = $('div#game2');
for (var i = 0; i < 8; i++) {
$game1.append($('div.frame').eq(0).clone());
}
var $frame = $game1.find('div.frame');
$(window).on('resize', function() {
var windowW = window.innerWidth, windowH = window.innerHeight;
var gameLen = windowW < windowH ? windowW : windowH;
$game1.css({
'width': gameLen + 'px',
'height': gameLen + 'px'
});
});
$(window).trigger('resize');
})(jQuery);
HTML
<div id="game1">
<!-- this is one frame. Its cloned and repeated 8 more times -->
<div data-win="-" class="frame">
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div data-sign="-" class="signbox"></div>
<div class="winsign"></div>
</div>
</div>
CSS
html, body {
width: 100%; height: 100%;
min-width: 500px;
min-height: 500px;
margin: 0;
font-family: 'Open sans', sans-serif;
}
body {
background-image: -webkit-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
background-image: -moz-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
background-image: -ms-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
background-image: -o-radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
background-image: radial-gradient(circle farthest-side, #F8F8F8 0%, #EDEDED 100%);
}
div {
box-sizing: border-box;
}
#game1, #game2 {
min-width: 500px;
min-height: 500px;
margin: auto;
}
.frame {
float: left;
position: relative;
width: 32%; height: 32%;
margin: 0.66%;
}
.frame > .winsign {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
}
.frame .signbox {
float: left;
width: 33.33%; height: 33.33%;
border: 0px solid rgba(0, 0, 0, .5);
overflow: hidden;
}
.frame:nth-child(1) { background: rgba(255, 0, 0, .3); }
.frame:nth-child(2) { background: rgba(0, 255, 0, .3); }
.frame:nth-child(3) { background: rgba(0, 0, 255, .3); }
.frame:nth-child(4) { background: rgba(111, 111, 0, .3); }
.frame:nth-child(5) { background: rgba(0, 111, 255, .3); }
.frame:nth-child(6) { background: rgba(255, 0, 121, .3); }
.frame:nth-child(7) { background: rgba(77, 25, 255, .3); }
.frame:nth-child(8) { background: rgba(12, 12, 123, .3); }
.frame:nth-child(9) { background: rgba(255, 255, 5, .3); }