Custom Responsive grid column sizes not sizing properly - html

Question

Ok. Long time reader first time poster. So I have been trying to create a custom grid system so I don't have to rely on frameworks such as bootstrap or boilerplate all the time. I have got the grid working but, When a col-12x is above another col-12x. The first columns still has 15px of padding on the right, and some columns don't have the padding on the right of the last column in a row. The text wont break the same as it is for identical columns. I have attached a link to a [JSFIDDLE][1] since S.O wont let me put in the css for some reason.
<div class="grid-fw">
<div class="row">
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
<div class="col-1xs"><p>col-1</p></div>
</div>
<div class="row">
<div class="col-6xs"><p>col-6</p></div>
<div class="col-4xs"><p>col-4</p></div>
<div class="col-2xs"><p>col-2</p></div>
</div>
<div class="row">
<div class="col-6xs col-8lg">
<div class="col-8xs"><p>col-8</p></div>
<div class="col-4xs"><p>col-4</p></div>
</div>
<div class="col-6xs col-4lg"><p>col-8</p></div>
</div>
<div class="row">
<div class="col-4xs"><p>col-4</p></div>
<div class="col-4xs"><p>col-4</p></div>
<div class="col-4xs"><p>col-4</p></div>
</div>
<div class="row">
<div class="col-12xs"><p>col-12</p></div>
<div class="col-12xs"><p>col-12</p></div>
</div>
</div>
I have a feeling that its the same issue for both things, but its driving me crazy. Any help would be greatly appreciated.

Answer 1

because col-12* it is your max # of columns (like bootstrap), so you can only have one for each .row (given your current CSS) where you state:
/* Floats last ".col-" to the right */
[class*='col-']:last-of-type { padding-right: 0; }
having two col-12* in one .row will make the 1st col-12* to have your default padding-right:10px as you state here
/* Column attribute selector */
[class*='col-'] { position: relative; float: left; padding-right: 10px; min-height: 1px; }
Snippet
/* Grid Container */
.grid,
.grid-fw {
padding: 15px;
margin: 0 auto;
}
/* Phones */
#media (min-width: 420px) {
.grid {
width: 400px;
}
}
/* Mobile */
#media (min-width: 768px) {
.grid {
width: 750px;
}
}
/* Tablet */
#media (min-width: 992px) {
.grid {
width: 970px;
}
}
/* Desktop */
#media (min-width: 1200px) {
.grid {
width: 1170px;
}
}
/* Clearfix */
.row:after,
.row:before {
content: "";
display: table;
clear: both !important;
}
/* Column attribute selector */
[class*='col-'] {
position: relative;
float: left;
padding-right: 10px;
min-height: 1px;
}
/* Floats last ".col-" to the right */
[class*='col-']:last-of-type {
padding-right: 0;
}
/* Phones Grid Columns */
#media only screen and (max-width: 420px) {
[class*='col-'] {
width: 100%;
padding-right: 0;
}
}
/* Grid Columns Mobile First */
#media (min-width: 321px) {
.col-1xs {
width: 8.33333333%;
}
.col-2xs {
width: 16.66666667%;
}
.col-3xs {
width: 25%;
}
.col-4xs {
width: 33.33333333%;
}
.col-5xs {
width: 41.66666667%;
}
.col-6xs {
width: 50%;
}
.col-7xs {
width: 58.33333333%;
}
.col-8xs {
width: 66.66666667%;
}
.col-9xs {
width: 75%;
}
.col-10xs {
width: 83.33333333%;
}
.col-11xs {
width: 91.66666667%;
}
.col-12xs {
width: 100%;
}
}
/* Tablet Grid Columns Mobile First */
#media (min-width: 768px) {
.col-1sm {
width: 8.33333333%;
}
.col-2sm {
width: 16.66666667%;
}
.col-3sm {
width: 25%;
}
.col-4sm {
width: 33.33333333%;
}
.col-5sm {
width: 41.66666667%;
}
.col-6sm {
width: 50%;
}
.col-7sm {
width: 58.33333333%;
}
.col-8sm {
width: 66.66666667%;
}
.col-9sm {
width: 75%;
}
.col-10sm {
width: 83.33333333%;
}
.col-11sm {
width: 91.66666667%;
}
.col-12sm {
width: 100%;
}
}
/* Laptop Grid Columns */
#media (min-width: 992px) {
.col-1md {
width: 8.33333333%;
}
.col-2md {
width: 16.66666667%;
}
.col-3md {
width: 25%;
}
.col-4md {
width: 33.33333333%;
}
.col-5md {
width: 41.66666667%;
}
.col-6md {
width: 50%;
}
.col-7md {
width: 58.33333333%;
}
.col-8md {
width: 66.66666667%;
}
.col-9md {
width: 75%;
}
.col-10md {
width: 83.33333333%;
}
.col-11md {
width: 91.66666667%;
}
.col-12md {
width: 100%;
}
}
/* Desktop Grid Columns */
#media (min-width: 1200px) {
.col-1lg {
width: 8.33333333%;
}
.col-2lg {
width: 16.66666667%;
}
.col-3lg {
width: 25%;
}
.col-4lg {
width: 33.33333333%;
}
.col-5lg {
width: 41.66666667%;
}
.col-6lg {
width: 50%;
}
.col-7lg {
width: 58.33333333%;
}
.col-8lg {
width: 66.66666667%;
}
.col-9lg {
width: 75%;
}
.col-10lg {
width: 83.33333333%;
}
.col-11lg {
width: 91.66666667%;
}
.col-12lg {
width: 100%;
}
}
/* Removes padding behaviour on widths */
*,
*:after,
*:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix for Nested Rows */
.clearfix {
clear: both;
}
/* Show Columns */
[class*='col-'] > p {
background-color: #004d81;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
font-size: 0.8rem;
text-align: center;
color: #fff;
}
<div class="grid-fw">
<div class="row">
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
<div class="col-1xs">
<p>col-1</p>
</div>
</div>
<div class="row">
<div class="col-6xs">
<p>col-6</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-2xs">
<p>col-2</p>
</div>
</div>
<div class="row">
<div class="col-6xs col-8lg">
<div class="col-8xs">
<p>col-8</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
</div>
<div class="col-6xs col-4lg">
<p>col-8</p>
</div>
</div>
<div class="row">
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
<div class="col-4xs">
<p>col-4</p>
</div>
</div>
<div class="row">
<div class="col-12xs">
<p>col-12</p>
</div>
</div>
<div class="row">
<div class="col-12xs">
<p>col-12</p>
</div>
</div>
</div>