GRID resizing

When using the Grid field type, you have no control on the width of the column, the width is spread out relatively. So with 4 columns, each column gets 25%.

To overrule this, apply a class to the 'value' of the field. example: Grid3Columns

then add the class into the customer.css. We will set the width of column 2 to 100 pixel and of the third column to 200 pixels. the first column is not defined and will take the remaining width.

   .Grid3Columns table colgroup col:nth-child(2) {
   width: 100px;
    }
   .Grid3Columns table colgroup col:nth-child(3) {
   width: 200px;
    }

the first row, child(2) sets the width for the second column to 100 px.

Another example with 9 columns:

   .Grid9Columns table colgroup col:nth-child(1) {   width: 100px; }
   .Grid9Columns table colgroup col:nth-child(2) {   width: 150px; }
   .Grid9Columns table colgroup col:nth-child(3) {   width: 100px; }
   .Grid9Columns table colgroup col:nth-child(4) {   width: 150px;}
   .Grid9Columns table colgroup col:nth-child(5) {   width: 120px; }
   .Grid9Columns table colgroup col:nth-child(6) {   width: 100px; }
   .Grid9Columns table colgroup col:nth-child(7) {   width: 160px; }
   .Grid9Columns table colgroup col:nth-child(8) {   width: 120px;  }
   .Grid9Columns table colgroup col:nth-child(9) {   width: 150px; }