how to use full screen responsive

Hi, What's the recommended way so page elements occupy the space they require and the collection of elements use the maximum space available. The best I've found so far is:
The outer container:
<div style="position: absolute; top: 300px; right: 10px; bottom: 0; left: 10px;">
and within this container - css grid:

  .grid {display: grid;
         grid-template-columns: repeat( auto-fit, minmax(100px, max-content) );
         grid-auto-rows: minmax(min-content, max-content); 
         grid-template-areas:
         "pic pic bot-name bot-name bot-name"
         "pic pic syn-fmly syn-fmly syn-fmly";
        grid-gap: 10px;
       }

Really like to know the best responsive design so the template uses the full screen.
I seem to remember reading that using "position: absolute" is not recommended, but without this there always seems to be large empty areas on the left and right sides.
Thanks for any help
David