7

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?

traumerisch
  • 207
  • 1
  • 4
  • 10
  • 1
    Are you using any particular grid framework? Can you post the HTML and CSS you have so far? What have you tried? – Steve Feb 09 '16 at 02:46

4 Answers4

9

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

<div>&nbsp;</div>
xzegga
  • 3,051
  • 3
  • 25
  • 45
  • Nice :) If the answer resolve your problem feel free to mark as correct answer – xzegga Feb 11 '16 at 01:30
  • I guess this is the worst example that someone should take into consideration, never use an empty element to add space !!! – mcmwhfy Mar 08 '21 at 09:24
7

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.

Boris Vladt
  • 71
  • 1
  • 2
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

Community
  • 1
  • 1
Carlton
  • 838
  • 6
  • 16
  • I went with option 2 and added all the necessary CSS. However, I don't want any text to appear in the "empty" columns. When I delete the text in between the div tags, the columns disappear and the name and navbar go back to laying directly on the edge of the screen. – traumerisch Feb 09 '16 at 03:43
  • Try adding   to the empty columns – Carlton Feb 09 '16 at 03:57
  • I would go with option 1 if you can. See the update in the original post – Carlton Feb 09 '16 at 04:00
0

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">
      <a href="home.html">Home</a>
      <a href="about.html">About</a>
      <a href="page3.html">Page 3</a>
   </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

tbmpls
  • 221
  • 3
  • 8