Grid Layout

Grid

need to give initial size but new rows are added automatically

• add components
  • by coordinates
    • component may occupy multiple cells
  • by cursor left-to-right top-to-bottom

insert / delete rows / columns

adjustments

• margins
• cell spacing
• component alignment
• sizing / expansion
  • components can have both horizontal / vertical expand ratio
  • undefined - size to fit

How to (maybe out of book)

Border

.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 */

}

above is example from book, does not seem to work, maybe out of dated. checking page now style name is different. it's safer to use a panel, I think

Or - put a Panel inside layout and set panel border (this could be easier)

Or - not even need to put a Panel inside, just a Label has style too!