First of all you should add autowidth: true option, which sets the initial width of the grid to the width of outer container on the HTML page. It will force resizing of all columns proportional of the value of width property in colModel. Because you don't specify any width property then the default 150 value will be used. In case of resizing it means just that you specified the same width for all columns. If you need to hold some fixed width for some columns, for example for the column which have formatter: "actions" (which displays two editing icons in the grid), then you can add fixed: true to the column.
To resize the grid every time after the web browser window or the outer div will be resized you can use the following code
$(window).bind("resize", function () {
var newWidth = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid("setGridWidth", newWidth, true);
}).trigger("resize");
(see the old answer).
Additional features exist in free jqGrid, the fork of jqGrid which I develop starting with renaming jqGrid to Guriddo jqGrid JS (see the post) and making it commercial. The demo: http://jsfiddle.net/OlegKi/andm1299/19/ uses <div class="container"> as the outer div of jqGrid and to add classes: "hidden-xs", labelClasses: "hidden-xs" bootstrap classes (see the documentation) to less important column ComboDuration of the demo. As the result, the column will be made automatically hidden/visible on resizing of the grid. It could be very helpful to produce good results on mobile devices with low pixel resolution.
