Position Display Objects in a Grid Layout

Submitted by:Jhon Jhon

Date added:18 May, 2011


This is a short way of positioning display objects in a grid layout. It makes use of the modulo operator (%) to position each display object along the x axis and the floor method of the Math class for the y position.

This example creates 20 instances of a custom display object called MyDisplayObject positioning each instance in a grid 5 columns wide. As you may have guessed, the two 5′s in the snippet represent the number of columns in the grid.

Tags: grid layout

Code Snippet:

    for (var i:uint = 0; i < 20; i++)
var displayObject:MyDisplayObject = new MyDisplayObject();
displayObject.x = displayObject.width * ( i % 5 );
displayObject.y = displayObject.height * Math.floor( i / 5 );