I’d like to share with you a mysterious internal secret kept within Microsoft and the W3C for now a long time now. It’s the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps. Most of you probably think that this specification was designed to help developers having a better layout engine for their websites and applications. But the original motivation was completely different. The very first aim was to be able to create a Tetris-like game in an easy way! But I’m sure you’re not convinced yet. That’s why, I’m going to prove it to you using Blend 5 as a companion. Ok, let’s go!
Note: this is the director uncut version of my ParisWeb 2013 lightning talk you may watch here: http://new.livestream.com/accounts/1764940/parisweb/videos/31984601 if you understand French.
Pre-requisites: to follow this tutorial, you need first to:
1 – Download/buy & install Windows 8/8.1 RTM on your machine: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx
2 – Download & install the free edition of Visual Studio 2012/2013 Express RTM for Windows 8/8.1: http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx that includes Expression Blend 5 for Visual Studio or use the higher versions.
Step 1: discover the secret behind the CSS Grid Layout thanks to Blend 5
Launch Expression Blend 5 and create a new HTML (Windows Store) project of type Blank App. Name it “TheRealCSSGridStory”:
Replace:
<p>Content goes here</p>
By:
<div class="mainGrid"> </div>
Let’s create a grid containing 10 columns and 20 lines whatever the screen’s resolution by using fraction units. For that, add this CSS rule:
.mainGrid { display: -ms-grid; width: 100%; height: 100%; -ms-grid-columns: (1fr)[10]; -ms-grid-rows: (1fr)[20]; }
Select in the Live DOM the <div> mainGrid element and you should obtain this:
Let’s draw a shape inside this beautiful grid. Add this block of HTML inside the main grid:
<div class="shape1"> </div>
And insert this CSS associated with it:
.shape1 { -ms-grid-column: 4; -ms-grid-row: 3; -ms-grid-column-span: 3; -ms-grid-row-span: 2; background-color: red; }
You should now see that in Blend 5:
Cool, but not yet something that looks like to a Tetris gaming shape. Let’s work on that. Add these 2 DIV inside the shape1:
<div class="line1shape1"></div> <div class="line2shape1"></div>
and replace the previous .shape1 rule by this block of CSS:
.shape1 { -ms-grid-column: 4; -ms-grid-row: 3; -ms-grid-column-span: 3; -ms-grid-row-span: 2; display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr; width: 100%; height: 100%; } .line1shape1 { -ms-grid-column-span: 2; background-color: red; } .line2shape1 { -ms-grid-column: 2; -ms-grid-row: 2; -ms-grid-column-span: 2; background-color: red; }
The shape1 is currently spanning on 3 columns and on 2 rows. I’m then creating a new grid inside this area defined by 3 columns and 2 rows in order to have cells having exactly the same size as the cells of the main grid, whatever the resolution will be!
Once done, I’m creating 2 lines in order to mimic the Z shape of the Tetris game. You should now have this result:
Even better, play with the various views available in the Device tab and you’ll see that our game is already implementing a responsive design! This is freaking cool, isn’t it? 
Here is for instance the outputs for the snapped view and the portrait view:
Let’s now resolve another problem. The Tetris grid gaming grid is composed of squares. Our current responsive design is stretching 100% width. Building a Windows 8 application for the Windows Store will most of the time meet widescreen monitors (current tablets are 1366×768 or 1920×1080 and most desktop PC have a 16/9 ratio). Let’s then assume that targeting a widescreen ratio is addressing almost all cases. To compute the proper responsive width, you need to do: 9/16 * 10/20 (the ratio of the main gaming grid) which equals to: 28.125%.
Add then this rule to target the main grid in full screen landscape mode:
@media screen and (-ms-view-state: fullscreen-landscape) { .mainGrid { width: 28.125%; } }
Let’s now center the gaming grid by using… the CSS Grid Layout again! (And you should now start to believe it really was really designed for Tetris!).
Switch the body element to –ms-grid made of 1 column & 1 row:
body { display: -ms-grid; -ms-grid-columns: 1fr; -ms-grid-rows: 1fr; width: 100%; height: 100%; }
Now simply add this attribute to the CSS associated to the the main grid:
-ms-grid-column-align: center;
And the grid is now centered:
At this stage, you’re probably already shocked. “How could I have missed this incredible secret?” you’re wondering to yourself. Take a breath. Now that you now THE secret, let’s continue this tutorial together to discover other awesome possibilities delivered by the CSS specifications combined together.
Step 2: moving or rotating a shape
My first idea was to try avoiding JS by using as much CSS as possible. I then first tried to use CSS3 Animations to move & animate the shape on the various rows/columns. But the bad news is that you can’t change the –ms-grid-column or –ms-grid-row values via CSS3 animations. This will then be the job of some JavaScript code.
I then started to think about how I will rotate the shape. CSS Transforms seemed to be perfectly adapted for that. Let’s check that by doing some experiments. Blend 5 is really cool for that as you can directly see in live the outcome of your changes.
Add a rotation of 90 degrees on shape1 by adding this class to its DIV element:
.shape1rotated { transform: rotate(90deg); }
I’m sure you weren’t expecting this:
Problem: it’s not properly aligned to the gaming grid. To align our shape to the grid, we need some small adjustments:
.shape1rotated { transform-origin: 33% 50%; transform: rotate(90deg) translateX(-33%); }
And we now have the same rotation as a Tetris-like game. Here are 2 screenshots before/after the rotation:
We can even go further than that by using a transition set on shape1 via this:
transition: all 1s ease-out;
And now, removing/adding the .shape1rotated class on the shape1 DIV will trigger a smooth rotation animation!
Check out the result inside Blend 5 thanks to this short video:
At this stage, we could think that this approach is the good one to build our game. But this is unfortunately not yet the case. Here’s why. Try moving the shape by simply changing its –ms-grid-column property. Blend 5 will reflect the changes directly. When not rotated, the shape can be moved up to the 8th row:
So far so good. But when you’re rotating it by adding the .shape1rotated class to the DIV:
You see that there is still 1 row available on the right for the shape’s move. If you think we simply need to move it to the 9th row, you’re wrong! Indeed, here is what we’ll obtain on the 9th row:
You probably forgot that we’re currently moving a DIV element displaying a grid layout of 3 columns and 2 rows matching exactly the underlying gaming grid. When moving it, we really have the feeling that this is a block part of the main grid we’re moving. But for this tricks to work, we need at least 3 columns available to contain our shape element. If it’s contained in 2 columns (when set to the 9th column) or less, it will be “compressed” like in the screenshot.
There is 2 ways to resolve that.
1 – Stop using CSS Transforms and draw the rotated shape using another grid definition. For instance, using 3 div inside the shape instead of 2. But using such an approach will prevent us to have the nice CSS Animations in place.
2 – Redefined the main grid to work on 12 columns instead of 10 and we’ll use only the columns from 2 to 11 (a sort of clipping area if you wish). This will resolve our “overflow” problem.
Let’s implement the 2nd solution.
Redefine the main grid using that:
.mainGrid { display: -ms-grid; -ms-grid-columns: (1fr)[12]; -ms-grid-rows: (1fr)[20]; -ms-grid-column-align: center; width: 100%; height: 100%; }
To have also the proper ratio, you need to update the media query associated:
@media screen and (-ms-view-state: fullscreen-landscape) { .mainGrid { width: 33.75%; } }
33.75% = 9/16 *12/20
Let’s also add a “virtual grid” to delimitate the space where we will be able to move the shapes. Inside the main grid DIV, insert this one:
<div class="virtualGrid"> </div>
Associated with this block of CSS:
.virtualGrid { -ms-grid-column: 2; -ms-grid-column-span: 10; -ms-grid-row-span: 20; border-right-style: dashed; border-left-style: dashed; background-color: #505A5A; }
It will help to delimitate the gaming area with a grey background and some dashed border lines.
Now, if I’m moving the Z shape on column 9, row 2, here is the result:
If I’m rotating it with CSS Transforms, I can move it correctly on column 10:
Bonus – handling the Portrait mode:
If you’d like to support the portrait mode (which is even better for the Tetris grid game), add this CSS Media Query definition:
@media screen and (-ms-view-state: fullscreen-portrait) { .mainGrid { width: 106.66%; } }
As the ratio need to be computed as = 16/9 * 12/20 = 106,66%.
Step 3: adding some code to handle part of the game logic
Now that we’ve solved the graphics part of the game using only some pure CSS & HTML code, we need the help of JavaScript to move/rotate the shape in the gaming area. We’re going to re-implement the CSS logic via a JS object that’s going to be defined thanks to WinJS.Class.
Open the “TheRealCSSGridStory” in Visual Studio 2012.
Create a TetrisShapeZ.js file in the JS directory and copy/paste this code:
(function () { "use strict"; var ShapeZ = WinJS.Class.define( /// Constructor - columnIndex is optional. If provided, will define in which column the shape will start function (columnIndex) { // We're creating the equivalent of this HTML block : // <div class="shape1 "> // <div class="line1shape1"></div> // <div class="line2shape1"></div> // </div> this._shape1 = document.createElement("div"); var line1 = document.createElement("div"); var line2 = document.createElement("div"); this._shape1.className = "shape1"; line1.className = "line1shape1"; line2.className = "line2shape1"; this._shape1.appendChild(line1); this._shape1.appendChild(line2); // Boolean to indicate if the shape is in its default orientation mode or not // True means not rotated, false means rotated this._defaultOrientation = true; // Setting the column position in the main grid if (columnIndex) { this._currentColPos = columnIndex; this._shape1.style.msGridColumn = this._currentColPos; } else { this._currentColPos = 1; } // We always start at line 1 this._currentLinePos = 1; // Boolean to know if the shape can be move/rotate or not // If true, this means we've reached the last line possible this._fixed = false; }, { /// Specify in which HTML element displayed in CSS Grid you'd like to work with /// width is the number of columns of the grid & height is the number of lines insertIntoGrid: function (element, width, height) { element.appendChild(this._shape1); this._gridWidth = width; this._gridHeight = height; // These are the left & bottom max limit for this shape // when displayed in default orientation mode this._maxLeft = width - 3; this._maxBottom = height - 1; }, /// Rotate the Z shape 90 degrees anti/clockwise using CSS Transforms /// by simply removing/adding the shape1rotated class rotate: function () { if (!this._fixed && this._defaultOrientation) { // rotating 90 degrees clockwise, it will trigger also the CSS Transition WinJS.Utilities.addClass(this._shape1, "shape1rotated"); this._defaultOrientation = false; // the left limit is now +1 vs the default orientation this._maxLeft = this._gridWidth - 2; } else { if (!this._fixed && this._currentColPos < this._maxLeft) { // removing the shape1rotated will automatically reset the shape // to its initial matrix and again the CSS Transition will do the animation for you WinJS.Utilities.removeClass(this._shape1, "shape1rotated"); this._defaultOrientation = true; this._maxLeft = this._gridWidth - 3; } } }, // Internal function called by public moveLeft/moveRight _moveHorizontally: function (direction) { if (!this._fixed && (this._currentColPos < this._maxLeft || direction === -1) && (this._currentColPos > 2 || direction === 1)) { this._currentColPos = this._currentColPos + direction; this._shape1.style.msGridColumn = this._currentColPos; } }, /// Move the shape on the immediate left column /// Test if you've reached the left limit or not moveLeft: function () { this._moveHorizontally(-1); }, /// Move the shape on the immediate right column /// Test if you've reached the right limit or not moveRight: function () { this._moveHorizontally(1); }, /// Move the shape down on the immediate below line /// Test if you've reached the bottom limit or not moveDown: function () { if (!this._fixed) { this._currentLinePos = this._currentLinePos + 1; this._shape1.style.msGridRow = this._currentLinePos; if (this._currentLinePos === this._maxBottom) { this._fixed = true; } } } } ); WinJS.Namespace.define("CSSTetris", { ShapeZ: ShapeZ }); } ());
Simply read the code to understand what it’s doing. It should be commented enough to be self-explicit.
Add a reference to this script file in default.html and keep only this block of HTML inside the body:
<div class="mainGrid"> <div class="virtualGrid"> </div> </div>
Jump into default.js.
The cool part of having well documented the code is that we now have interesting IntelliSense details like for the constructor:
or the rotate function:
To properly use this code, add this block of JS just after processAll call:
document.addEventListener("keydown", OnKeyDown, false); mainGrid = document.getElementsByClassName("mainGrid")[0]; myShape = new CSSTetris.ShapeZ(4); myShape.insertIntoGrid(mainGrid, 12, 20); init();
And add these 2 functions:
function init() { setInterval(function () { myShape.moveDown(); }, 1000); } function OnKeyDown(event) { switch (event.keyCode) { case KEYCODE_X: myShape.rotate(); break; case KEYCODE_LEFT: myShape.moveLeft(); break; case KEYCODE_RIGHT: myShape.moveRight(); break; case KEYCODE_DOWN: myShape.moveDown(); break; } }
And we’re done! We now have a very basic game using CSS Grid Layout coupled with CSS Transforms & Animations for the graphics part and a couple of JS lines of code to have the beginning of the basics of a Tetris-like game.
Here is a short video demonstrating the final result:
You can download the final Visual Studio solution corresponding to the 3 steps of this tutorial here: http://david.blob.core.windows.net/win8/TheRealCSSGridStory.zip
So, are you now convinced that CSS Grid Layout was made to simplify the creation of Tetris-like games?