Empty columns in responsive grid?

Question

I'm trying to learn the responsive grid and am having difficulty grasping how to place items within the "columns." I'm working with 12 of them, something that looks like the one here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

For example, I'd like to have one row with the name of the website on the left and the navigation bar on the right side:

<div class="row">   
   <div class="col-1">empty column acting as margin; do i need a div for this?</div>
   <div class="col-2" id="name">
       website name
   </div>
   <div class="col-4">another set of empty columns</div>
   <div class="col-4" id="navbar">
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
      <a href="page3.html">Page 3</a>
   </div>
   <div class="col-1">empty column as margin</div>
</div>

How would I be able to achieve this? The divs with "empty columns" in them are clearly wrong, but I'm not sure how to get the proper widths. The link above says that the number of columns in each row should add up to 12; does this mean I need to specify empty columns, too?

Answer 1

Mayor browsers ignore width for empty divs, a simple way to avoid this behavior is adding   to empty divs.

<div>&nbsp;</div>

Answer 2

The best solution using grid layout is to utilize its' power and not add empty elements in html (DOM).

In this example we want to have 12 columns in total, same width, where first and last are empty, as well mid four columns: 1 2 4 4 1

Html code:

<div class="grid-example">
    <div class="col-2" id="name">
        website name
    </div>
    <div class="col-4" id="navbar">
        <a href="home.html">Home</a>
        <a href="about.html">About</a>
        <a href="page3.html">Page 3</a>
    </div>
</div>

CSS code:

.grid-example {
    ...
    grid-template-areas: ". nm nm . . . . nvb nvb nvb nvb ."; 
}
.grid-example #name {
    grid-area: nm;
}
.grid-example #navbar {
    grid-area: nvb;
}

Here is what this means: In html there are only useful elements without redundant empty ones. CSS is master here. Child div's are assigned to grid area with (short) names. Now using property grid-template-areas, #name div is set to spread on two columns, #navbar div on four columns. Dots sets respective columns empty. That's it.

see at CodePen >>

The similar principle could be used for rows, columns doesn't have to be the same, element could be assigned to any cells area etc. Basically grid is very useful to spread any element over any grid area.

Note: .row class has flex layout so not needed here.