Vaadin 7.6.4 Gridlayout borders

I recently built the
and then added a gridlayout similar to the one
. I am trying to add a border around each cell like the example has (I know it is an image) by following the instructions as well as looking online. I am unable to get the borders to show. Is there something that I am missing besides what is in the documenation? I tried adding the following:

.v-gridlayout-gridexpandratio {
background: blue; /* Creates a “border” around the grid. /
margin: 10px; /
Empty space around the layout. */

/* Add padding through which the background color shows. */
.v-gridlayout-gridexpandratio .v-gridlayout-margin {
padding: 2px;

/* Add cell borders and make the cell backgrounds white.

  • Warning: This depends heavily on the HTML structure. /
    .v-gridlayout-gridexpandratio > div > div > div {
    padding: 2px; /
    Layout background will show through. /
    background: white; /
    The cells will be colored white. */

/* Components inside the layout are a safe way to style cells. /
.v-gridlayout-gridexpandratio .v-label {
text-align: left;
background: #ffffc0; /
Pale yellow */

Hey Philip,

Try this:

protected void init(VaadinRequest request) {
  final CssLayout layout = new CssLayout();

  GridLayout grid = new GridLayout(3, 3);
  for (int i = 0; i < grid.getColumns() * grid.getRows(); i++) {
    grid.addComponent(new Label("Cell " + i));



.v-gridlayout-slot {
  border: 1px solid rgba(0,0,0,0.12);