Grid Layout : Gap appears mysteriously in between cells.

Hi geeks,
I have a problem at hand which I really cant figure out. I am using the below attached code

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package myapp;

import java.lang.System;
import javafx.scene.paint.Color;
import com.javafx.preview.layout.GridRow;
import javafx.scene.control.Button;
import javafx.scene.shape.Rectangle;
import javafx.scene.Node;
import javafx.scene.Cursor;
import javafx.scene.control.ScrollView;
import javafx.scene.control.ScrollBarPolicy;
import javafx.scene.control.Label;

/**
 * @author chowani
 */
public-read def grid: com.javafx.preview.layout.Grid = com.javafx.preview.layout.Grid {
            // layoutInfo: __layoutInfo_grid
            hgap: 0.0
            vgap: 0.0
            rows: getRowsOfGrid()
        }
def __layoutInfo_scrollView: javafx.scene.layout.LayoutInfo = javafx.scene.layout.LayoutInfo {
            width: 500.0
            height: 300.0
        }
public-read def scrollView: javafx.scene.control.ScrollView = javafx.scene.control.ScrollView {
            layoutX: 88.0
            layoutY: 54.0
            layoutInfo: __layoutInfo_scrollView
            node: grid
            hbarPolicy: ScrollBarPolicy.AS_NEEDED
            vbarPolicy: ScrollBarPolicy.AS_NEEDED
        }
public-read def scene: javafx.scene.Scene = javafx.scene.Scene {
            width: 708.0
            height: 412.0
            content: getDesignRootNodes()
        }
public-read def currentState: org.netbeans.javafx.design.DesignState = org.netbeans.javafx.design.DesignState {
        }

public function getDesignRootNodes(): javafx.scene.Node[] {
    [scrollView,]
}

public function getDesignScene(): javafx.scene.Scene {
    scene
}

public function getRowsOfGrid(): GridRow[] {
    var layoutXCustom = 88.0 + 50.0 + 10.0;
    var noOfTasks = 1;
    var startDate: Float = 1; //hours

var endDate: Float = 10;
    var interval: Float = 2;

var noOfCols = 1;//Math.ceil((endDate - startDate) / interval);//5

var allRows: GridRow[];
    //0th HEADER row
    var taskHeader: Label = Label {
                text: "TaskName";
                width: 50.0
                height: 50.0
            }
    var stTime = startDate;
    var gridRow_Header: GridRow;
    var cellsOfHeaderRow;
    var separatorHeader: Rectangle = Rectangle {
                fill: Color.TRANSPARENT,
                //stroke: javafx.scene.paint.Color.BLACK
                width: 10.0
                height: 20.0
            }
    cellsOfHeaderRow = [taskHeader, separatorHeader,];

//Header Timing Labels
    for (j in [1..noOfCols]) {
        var taskIntervalHeader: Label = Label {
                    width: 50.0
                    height: 20.0
                    text: "{stTime + .1}-{stTime + interval } "
                }
        stTime = stTime + interval;//ideally 1 sec later :)
        insert taskIntervalHeader into cellsOfHeaderRow;

}
    gridRow_Header = GridRow {
                cells: cellsOfHeaderRow
            }
    allRows = [gridRow_Header];

//Actual Tasks
    for (i in [1..noOfTasks]) {
        var cellsOfRow;
        var gridRow: GridRow;
        System.out.println("{i}");
        //1st 2 cols to hold the tasks and a blank col. as separator
        var button: javafx.scene.control.Button = javafx.scene.control.Button {
                    text: "Task{i}"
                    cursor: Cursor.HAND
                    width: 50.0
                    action: function() {
                        System.out.println("Clicked {i}");

//TODO: All task clicks
                    }
                }

var separator: Rectangle = Rectangle {
                    fill: Color.TRANSPARENT,
                    //stroke: javafx.scene.paint.Color.BLACK
                    width: 10.0
                    height: 20.0
                }
        System.out.println("xlayout : {separator.width}");
        //no. of Cols with actual intervals
        cellsOfRow = [button, separator];
        stTime = startDate;
        var timings_for_task = [2, 2.5, 3.5, 4.5];
        var widthOfCol: Number = 0.0;
        for (j in [1..noOfCols]) {
            //stTime -  "stTime + interval"
            //next list for all times for this Task <i>
            //for the timings present in the task

java.lang.System.out.println("||{stTime}");
            for (k in [1..timings_for_task.size() / 2]) {
                var stTime_cl = timings_for_task[k * 2 - 2];
                var enTime_cl = timings_for_task[k * 2 - 1];

if (stTime_cl < stTime + interval and stTime_cl > stTime) {
                    java.lang.System.out.println("<>{stTime_cl}");
                    java.lang.System.out.println("<>{enTime_cl}");
                    //if k > stTime
                    var taskGrid1: Rectangle = Rectangle {
                                fill: Color.TRANSPARENT,
                                stroke: javafx.scene.paint.Color.BLACK
                                width: 50.0 * (stTime_cl - stTime) / (interval)
                                height: 50.0
                            };
                    java.lang.System.out.println("taskGridWiod1 {taskGrid1.width}");
                    insert taskGrid1 into cellsOfRow;
                    widthOfCol = widthOfCol + 50.0 * (stTime_cl - stTime) / (interval);
                    if (enTime_cl < stTime + interval) {
                        var taskGrid2: Rectangle = Rectangle {
                                    fill: Color.RED,
                                    stroke: javafx.scene.paint.Color.BLACK
                                    width: 50.0 * (enTime_cl - stTime_cl) / (interval)
                                    height: 50.0
                                };
                        java.lang.System.out.println("taskGridWiod2{taskGrid2.width}");
                        insert taskGrid2 into cellsOfRow;
                        widthOfCol = widthOfCol + 50.0 * (enTime_cl - stTime_cl) / (interval);
                    } else {
                        var taskGrid2: Rectangle = Rectangle {
                                    fill: Color.RED,
                                    stroke: javafx.scene.paint.Color.BLACK
                                    width: 50.0 * (stTime + interval - stTime_cl) / (interval)
                                    height: 50.0
                                };
                        java.lang.System.out.println("taskGridWiod2{taskGrid2.width}");
                        widthOfCol = widthOfCol + 50.0 * (stTime + interval - stTime_cl) / (interval);
                        insert taskGrid2 into cellsOfRow;
                    }
                }

}
            stTime = stTime + interval;
            if (widthOfCol < 50.0) {
                var taskGridFiller: Rectangle = Rectangle {
                            fill: Color.TRANSPARENT,
                            stroke: javafx.scene.paint.Color.BLACK
                            width: 50.0 - widthOfCol
                            height: 50.0
                        };
                java.lang.System.out.println("Filler {taskGridFiller.width}");

insert taskGridFiller into cellsOfRow;
            }
            widthOfCol = 0.0
        }
        gridRow = GridRow {
                    cells: cellsOfRow
                }
        insert gridRow into allRows;
    }

return allRows;
}

public class TestingGrids {

}

function run(): Void {
    System.out.println("running");
    var design = TestingGrids {};
    javafx.stage.Stage {
        title: "TestingGrid"
        scene: design.getDesignScene()
        resizable: false
    }
    for (n in scene.content) {
        System.out.println(n);

}

The only problem which happens is when I run this program, I should get 3 adjacent rectangles, however, I get a gap b.w the 1st and the 2nd one. (Please see the pic attached.) Can someone please help?? This is really urgent for me to complete. Thanks a lot in advance...

Guys, I got the reason. The width of the subsequent cells of rows in a grid is governed by the 1st row's cells width. Thanks anyways.