CSS Grid - I need a minor help

CSS Grid - I need a minor help
0

#1

Hi

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.


#2

grid-template-columns: 28% 100%;


#3

cool! thanks!

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


#4

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


#5

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>?


#6

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 :


#7

Actually, the property auto should work


#8

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


#9

i see. thank you for this!


#10

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


#11


#12
  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

IT WORKS!!!