tile numbering

showing tile number automatically (using CSS) at the left top

by Vivek Athalye

HTML

<section class="section static">
	<div class="tiles level1">
		<span class="title">
			<span class="brand">So</span>mething
		</span>
		<div class="tiles level2">
			<div class="tiles level3">
				<span class="tile t1 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
				<span class="tile t2 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
			</div>
			<div class="tiles level3">
				<span class="tile t3 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
				<span class="tile t4 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
			</div>
		</div>
		<div class="tiles level2">
			<div class="tiles level3">
				<span class="tile t5 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
				<span class="tile t6 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
			</div>
			<div class="tiles level3">
				<span class="tile t7 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
				<span class="tile t8 centerContainer"><span class="centerContent"><span class="brand">So</span>mething</span></span>
			</div>
		</div>
	</div>
  </section>

CSS

.tiles {
	/* flex properties as container (tiles level 1, 2 & 3) */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: strech;
	align-content: strech;

	/* flex properties as content (tiles level 2 & 3) */
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: strech;

}
.tiles.level1 {
	flex-direction: column;
	flex-grow:0;
	width: 600px;
	height: 300px;
	
	counter-reset: tileNum;
}
.tiles.level2 {
	flex-direction: row;
}
.tiles.level3 {
	flex-direction: row;
}

.tiles .title {
	align-self: center;
	font-size: 42px;
}

.tile {
	border: 1px solid black;
	background-color: white;
	width: 1px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto; /* auto = use width & height values if available */
	
	font-size: 24px;
}

.centerContainer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}
.centerContent {
/*	flex-grow: 1;
	flex-shrink: 1;
	align-self: center;*/
}

.tile:before {
	counter-increment: tileNum;
	content: counter(tileNum);
	align-self: flex-start;
	flex-grow:0;
	font-size: 16px;
}
.tile:after {
	content: ' ';
	align-self: flex-end;
	flex-grow:0;
	font-size: 16px;
}

.brand {
	text-decoration: underline;
	font-variant: small-caps;
}