Empty columns in responsive grid? - html

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">
Home
About
Page 3
</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> </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">
Home
About
Page 3
</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.

Answer 3

The total number of columns should add up to 12 for a row as each column equals 1/12 of 100% (8.333%)
In your example you have the correct number of columns:
col-1 | column count: 1
col-2 | column count: 3
col-4 | column count: 7
col-4 | column count: 11
col-1 | column count: 12
Total Columns = 12
For the columns to display inline the column divs must have additional css to override the default display: block;
Option 1 (display inline block):
[class*="col-"] {
display: inline-block;
margin-right: -0.2em; /* small hack to fix inline block spacing */
}
Option 2 (float):
[class*="col-"] {
float: left;
}
If you go the float method you will need to use a clearfix.
Update
I would recommend Option 1 as you will run into less issues with clearfixes and empty columns. See this codepen

Answer 4

Another css only solution similar to Boris's good answer (https://stackoverflow.com/a/48133942/4236417) but using grid-column rather than grid-template-areas.
.grid-example {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1%;
border: 1px solid black;
}
#name {
grid-column: 2 / 5
}
#navbar {
grid-column: 8 / 12
}
<div class="grid-example">
<div id="name">
website name
</div>
<div id="navbar">
Home
About
Page 3
</div>
</div>
Don't forget that css grid columns actually refer to the lines between the columns so grid-column: 8/12 runs from beginning of the 8th column ("Grid Track") until the beginning of the 12th column/Grid Track.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#grid_tracks