How to customize and make the contrib grid stylish

Question

So far i have used this coding for view formy mvc contrib grid....here the when i bind grid it becomes too large it the last column is going outside of the page...pls say how to reduce the size and make the grid some how stylish.....

<%= Html.Grid<Product>(Model)
           .Columns(column => 
          {

        column.For(c => c.ProductID);
        column.For(c => c.ProductName);
        column.For(c => c.SupplierID);
        column.For(c => c.CategoryID);
        column.For(c => c.QuantityPerUnit);
        column.For(c => c.UnitPrice);
        column.For(c => c.UnitsInStock);
        column.For(c => c.UnitsOnOrder);
        column.For(c => c.ReorderLevel);
        column.For(c => c.Discontinued);
        column.For(c => Html.ActionLink("Details", "Details", new { id = c.ProductID })).InsertAt(0).Encode(false);
        column.For(c => Html.ActionLink("Edit", "Edit", new { id = c.ProductID })).InsertAt(1).Encode(false);
        column.For(c => Html.ActionLink("Create", "Create", new { id = c.ProductID })).InsertAt(2).Encode(false);
        column.For(c => Html.ActionLink("Delete", "Delete", new { id = c.ProductID })).InsertAt(3).Encode(false);
          }
    )



%>

Answer 1

You could define a width or a custom CSS class for each column. This way you can restrict its size:

column.For(c => c.ProductID)
      .Attributes(gr => new Hash(@width => "15%"));

or a CSS class:

column.For(c => c.ProductID)
      .Attributes(gr => new Hash(@class => "productId"));

You could also put the entire grid into a div with fixed width.