The grid width and height should be set using CSS width and height styles. This can be done using pixels or percentages.
// set width using percentages <div id="myGrid" class="ag-fresh" style="width: 100%; height: 100%;"></div> // OR set width using fixed pixels <div id="myGrid" class="ag-fresh" style="width: 500px; height: 200px;"></div>
If using % for your height, then make sure the container you are putting the grid into also has height specified, as the browser will fit the div according to a percentage of the parents height, and if the parent has no height, then this % will always be zero. If your grid is not using all the space you think it should, then put a border on the grid's div and see if that's the size you want (the grid will fill this div). If it is not the size you want, then you have a CSS layout issue to solve outside of the grid.
If the width and / or height change after the grid is initialised, the grid will automatically resize to fill the new area.
The example below shows setting the grid size and then changing it as the user selects the buttons. Notice that the example calls api.doLayout() after the resize to avoid a flicker.