Flex Grid 8x8

flex-grid-8x8.md

Flex Grid 8x8

A Pen by Raphael on CodePen.

License.

index.pug

.board
	.container

script.js

jQuery.extend({repeat:function(times, callback) {
  var t = parseInt(times) | 0, i=0;
  if(t<=0) return console.warn('repeat() expects unsigned int gt 0.');
  var x = t;
  while(x > i) {
      callback(i++);
  }
}});

var i = 0;
$.repeat(64, function(index) {
  $('body .container')
  .append('<div class="item' +
          (!((index+1) % 8) ?
           ' last' : ''
          ) +'"><a href="#">'
          + (index+1) +
          '</a></div>');
});
$('a').click(function() { return false;});
/*$('li').filter(function() {
  return ($(this).prevAll().size()+1) % 8 == 0;
}).css('color','#00f').removeClass('last');*/

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

.board
	height: 100%
	width: 50%
	padding: 0
	margin-left: 10%
	//margin: 0px auto
	font-size: 1rem

.container
	display: flex
	flex-direction: row
	flex-flow: row wrap
	align-items: stretch
	align-content: flex-start
	width: 100%
	height: 50%
	width: inherit
	position: absolute

//.container:nth-of-type(1)
	//top: 10%

.item
	flex: 1 1 0px
	flex-basis: calc(50vw / 8)
	height: calc(50vw / 8)
	text-align: center
	justify-content: center
	font-size: 1.35rem
	font-family: 'Cinzel', serif
	display: flex
	align-items: stretch
	line-height: 1.35rem
	background-color: #abc

.item a
	border: 1px solid #000
	flex-grow: 1
	text-decoration: none
	color: #fff
	font-size: 1.7em
	padding-top: 0.4em
	position: relative
	box-sizing: content-box
	line-height: 100%