Grid newbie - list in navbar

HTML-CSS
1

Hi,

I have a newbie problem with grids, because I’ve just started to think about it seriously.

I made grid system, where nav bar takes 20vh and header takes 80vh. I want to put into nav h1/p and ul with links.

How I can set those links to be in separated cells?
Want to put h1 and p to the left and ul to the right in separated cells

IO

Im using Mozilla, cause it has very good grid system inspector for newbies like me haha.

Screenshot%20from%202019-03-06%2000-31-46
Screenshot%20from%202019-03-06%2000-31-461366×714 63.1 KB

2

CSS Grid will take any element inside of your grid element and place it into its own cell. You can declare where you want your ul element to be by using the grid-row, grid-column, or grid-area attributes. However, this will place your ul and all li elements into that cell/cell range. If you want each li in a separate cell on its own, I would consider change from using ul with each link being a li, to just setting each link inside of its own div. You can then nest these divs directly underneath your css grid element and have each one assigned to a cell.

Example:

<main class="css-grid">
  <div class="header-link-home"><a href="#">Home</a></div>
  <div class="header-link-service"><a href="#">Service</a></div>
  <div class="header-link-contact"><a href="#">Contact</a></div>
</main>


#css-grid {
  display: grid;
  grid-template-rows: 20vh 80vh min-content 40vw repeat(3, min-content);
  grid-template-columns: [full-start center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col- 
   end]) [center-end] minmax(3rem, 1fr) [full-end];
}

#header-link-home {
    grid-column: 6 / 7;
    grid-row: 1 / 2;
}

#header-link-service {
    grid-column: 7 / 8;
    grid-row: 1 / 2;
}

#header-link-contact {
    grid-column: 8 / 9;
    grid-row: 1 / 2;
}
1 Like
3

I can display my ul as a grid and put it inside nav, but I want to achieve separated cell for each link. Anyway, I’m gonna try it!

Thank you so much!