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:

1 Like

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