Materialize framework margin between columns

Question

Materialize framework comes with strange layout (at least for me). I can't find any margin between columns. This is my code:

<div class="container">
<div class="row">
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos      
  </div>
  <div class="col s4">
      kerlos     
  </div>
</div> 
</div>

And this is how it is look in browser.

There are no margins between the columns!

Answer 1

None of these answers are actually answering your question. I know exactly what you mean. Materialize (unlike Boostrap) does not take into consideration that you will use a header or content area with a solid color, so it doesn't provide "margin-space" like Bootstrap:

<div class="col-md-6"><div style="background: blue;">blue</div></div>
<div class="col-md-6"><div style="background: blue;">blue</div></div>

That would produce a solid whitespace of about 15px between each margin, regardless of the number of columns you create. It also degrades nicely.

When others are telling you to just apply a blanket padding solution, they're forgetting that the column to the right of the page will also have a padding and therefore ruin the line of containers on the right side of the page.

I suggest using @media queries depending on how many columns

If there are only two columns, then you can set padding-right on ALL divs to 15px, but then for @media query of large screen, set nth-child(even) (all divs on the right side of the screen with a padding of 0px;.

Keep in mind this still makes the left-hand column 15pix thinner than the right column, and if you have uniform content, it will be noticeable.

In this sense, Materialize failed to provide a proper column layout white space solution (using padding instead of global margin-space) and Bootstrap is just better in this area. Good luck to you.

Answer 2

I suggest you use a separate element inside a column, for example, .col-content:

JSFiddle

body {
    color: white;
}

.blue {
    background: blue;
}

.black {
    background: black;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
        <div class="col s4">
            <div class="col-content black">kerlos</div> 
        </div>
        <div class="col s4">
            <div class="col-content blue">kerlos</div>
        </div>
    </div> 
</div>

Answer 3

Whitespace between .col blocks is implemented via padding in Materialize. So, .col elements are used for layout.

Just should place Your visual blocks as childrens of .col elements.

Example – https://jsfiddle.net/y2dahvg5/

<div class="row">
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 xl4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Item</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <!-- Another items ... -->
</div>

Answer 4

The best way is to use classes provided by the Materialize framework, it provides us with a class 'offset' to add margins between columns. For example you can use the following code to add margins. You can learn more about grids and offsets here.

JS Fiddle

CSS

.green {
    background: green;
}
.black {
    background: black;
    color: #fff;
}

HTML

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet"/>

 <div class="container">
    <div class="row">
        <div class="col s3 offset-s1 green">
            kerlos
        </div>
        <div class="col s3 offset-s1 black">
            kerlos
        </div>
        <div class="col s3 offset-s1 green">
            kerlos
        </div>
    </div> 
</div>