Как обеспечить, чтобы столбцы содержались в строке

Question

Я пытаюсь создать сетку css с шестью столбцами. Вы можете увидеть выходные данные html и css at this jsfiddle. Проблема заключается в том, что столбцы переполняют строки, в которых они должны содержаться. Например, хотя строка должна содержать шесть столбцов «размер 1», шестой столбец в моем примере переливается в другой ряд. Как бы исправить это, чтобы количество столбцов для каждой строки не превышало ширину строки?

<div class="grid-container outline"> 
     <div class="row"> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
      <div class="col-1"><p>col-1</p></div> 
     </div> 
     <div class="row"> 
      <div class="col-2"><p>col-2</p></div> 
      <div class="col-2"><p>col-2</p></div> 
      <div class="col-2"><p>col-2</p></div> 
     </div> 
     <div class="row"> 
      <div class="col-3"><p>col-3</p></div> 
      <div class="col-3"><p>col-3</p></div> 
     </div> 
    </div> 

CSS

.grid-container{ 
    width: 100%; 
    max-width: 1200px;  
} 

/*-- cleafix hack -- */ 
.row:before, 
.row:after { 
    content:""; 
     display: table ; 
    clear:both; 
} 

[class*='col-'] { 
    float: left; 
    min-height: 1px; 
    width: 16.66%; 
    /*-- gutter -- */ 
    padding: 12px; 
    background-color: #FFDCDC; 
} 

.col-1{ width: 16.66%; } 
.col-2{ width: 33.33%; } 
.col-3{ width: 50%; } 
.col-4{ width: 66.66%; } 
.col-5{ width: 83.33%; } 
.col-6{ width: 100%; } 

.outline, .outline *{ 
    outline: 1px solid #F6A1A1; 
} 

/*-- some extra column content styling --*/ 
[class*='col-'] > p { 
background-color: #FFC2C2; 
padding: 0; 
margin: 0; 
text-align: center; 
color: white; 
} 

Answer 1

Я считаю, что вы ищете:

div { 
    box-sizing:border-box; 
} 

jsFiddle example

См: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing