CSS Grid - I need a minor help

CSS Grid - I need a minor help



I just wanna ask how to occupy the white space on the right? I set my grid template with ‘menu main’ only but the main part does not occupy its space hundred percent.



grid-template-columns: 28% 100%;


cool! thanks!

But may I know why ‘auto’ didn’t work?


whats your main goal here?
the left div has a certain width, then the right section fill out the rest of the screen?


also <li><a class="nav-link" href="#flex-wrap">#flex-wrap</a></li>
should be:

<li><a class="nav-link" href="#flex-wrap">flex-wrap</a></li>?


I found a way to make the right div fill out the whole width.
But I did not use css grid.
If you are interested, you can check this out :


Actually, the property auto should work


lol i was just copying the format on css-tricks :smile:


i see. thank you for this!


i tried placing ‘auto’ again but it is still not working. i’m sticking to percentage.


  1. I copied all your code into new empty pen. (As manipulating the existing code gave no result)
  2. Deleted second menu main in grid-template-areas:
    ’menu main’
    ‘menu main’;
  3. Set grid-template-columns: 28% auto;
  4. Deleted position: fixed; for #navbar