HTML
<div class="lt-ie10">
<div class="col--container col--wrapper">
<div class="col--12">
<h1>Rowless Grid</h1>
</div>
<div class="col--4">
<h2>one third</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias itaque, qui molestiae minus, nostrum sapiente fugit incidunt ea optio facere officia cupiditate dignissimos doloremque explicabo vitae. Quisquam repudiandae, aut! Labore?</p>
</div>
<div class="col--4">
<h2>one third</h2>
<p>Reiciendis a doloremque error, id quo atque. Pariatur illum voluptatum, neque odio, nobis dicta non sit, eaque necessitatibus dignissimos voluptates facilis tempora qui aliquam autem tenetur tempore doloribus. Obcaecati, nulla.</p>
</div>
<div class="col--4">
<h2>one third</h2>
<p>Earum facilis ut, voluptate voluptatibus minima quis, assumenda dolorem perspiciatis molestiae explicabo nisi, vel repellat voluptatem, praesentium itaque odio excepturi dolorum delectus omnis velit iste quasi natus dolore corporis! Voluptatibus.</p>
</div>
<div class="col--3">
<h3>one quarter</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet inventore odio eius, tempora, maiores distinctio similique. Expedita dolor molestias at culpa optio, hic assumenda vel qui accusantium unde. Dicta, sit.</p>
</div>
<div class="col--9">
<h3>three quarters</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur eos sint aliquam, cumque laboriosam sed molestias blanditiis obcaecati nemo excepturi eveniet, explicabo quasi eaque temporibus totam, animi expedita minus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat hic modi, excepturi aliquid in. Natus iure iste voluptate ipsum nemo voluptatum obcaecati tempore enim nam, provident, necessitatibus quod perspiciatis. Autem!</p>
</div>
<div class="col--2"><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, totam ipsa veritatis soluta, blanditiis veniam sed doloremque minima dolor ratione incidunt laboriosam, atque repudiandae sequi exercitationem similique distinctio voluptate dolorum.</small></div>
<div class="col--fill">
<h4>Fill the gap</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non perspiciatis, aspernatur sapiente iste cum rem amet deleniti, culpa dolore, eum quas libero tempora asperiores sed expedita mollitia porro quaerat laborum.</p>
<p>Suscipit obcaecati aliquam labore explicabo eum necessitatibus nemo adipisci fugit architecto ducimus natus perferendis consectetur quasi ad recusandae similique dicta maiores doloribus, soluta vero laudantium dolorum. Voluptate delectus dolores nihil!</p>
<p>Expedita sint rerum est, aspernatur eligendi. Distinctio recusandae sunt doloremque illum voluptatem exercitationem tenetur quasi nisi! Quidem omnis, tenetur, soluta iste ratione similique incidunt earum nisi quos. Hic, reiciendis inventore.</p>
</div>
<div class="col--2"><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, totam ipsa veritatis soluta, blanditiis veniam sed doloremque minima dolor ratione incidunt laboriosam, atque repudiandae sequi exercitationem similique distinctio voluptate dolorum.</small></div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
html {
font-size: 16px;
line-height: 1.4;
}
.col--wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.col--container {
max-width: 1140px;
margin: auto;
padding: 0 10px;
}
@media (min-width: 960px) {
.col--container {
padding: 0 40px;
}
}
.col--fill {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin: 0 20px 20px;
}
.col--1 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--1 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(8.33333% - 40px);
-ms-flex: 0 0 calc(8.33333% - 40px);
flex: 0 0 calc(8.33333% - 40px);
}
}
.col--2 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--2 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(16.66667% - 40px);
-ms-flex: 0 0 calc(16.66667% - 40px);
flex: 0 0 calc(16.66667% - 40px);
}
}
.col--3, .col--quarter, .col--forth {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--3, .col--quarter, .col--forth {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(25% - 40px);
-ms-flex: 0 0 calc(25% - 40px);
flex: 0 0 calc(25% - 40px);
}
}
.col--4, .col--third {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--4, .col--third {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(33.33333% - 40px);
-ms-flex: 0 0 calc(33.33333% - 40px);
flex: 0 0 calc(33.33333% - 40px);
}
}
.col--5 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--5 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(41.66667% - 40px);
-ms-flex: 0 0 calc(41.66667% - 40px);
flex: 0 0 calc(41.66667% - 40px);
}
}
.col--6, .col--half {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--6, .col--half {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(50% - 40px);
-ms-flex: 0 0 calc(50% - 40px);
flex: 0 0 calc(50% - 40px);
}
}
.col--7 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--7 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(58.33333% - 40px);
-ms-flex: 0 0 calc(58.33333% - 40px);
flex: 0 0 calc(58.33333% - 40px);
}
}
.col--8 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--8 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(66.66667% - 40px);
-ms-flex: 0 0 calc(66.66667% - 40px);
flex: 0 0 calc(66.66667% - 40px);
}
}
.col--9 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--9 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(75% - 40px);
-ms-flex: 0 0 calc(75% - 40px);
flex: 0 0 calc(75% - 40px);
}
}
.col--10 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--10 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(83.33333% - 40px);
-ms-flex: 0 0 calc(83.33333% - 40px);
flex: 0 0 calc(83.33333% - 40px);
}
}
.col--11 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--11 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(91.66667% - 40px);
-ms-flex: 0 0 calc(91.66667% - 40px);
flex: 0 0 calc(91.66667% - 40px);
}
}
.col--12 {
margin: 0 20px 20px;
}
@media (min-width: 768px) {
.col--12 {
-webkit-box-flex: 0;
-webkit-flex: 0 0 calc(100% - 40px);
-ms-flex: 0 0 calc(100% - 40px);
flex: 0 0 calc(100% - 40px);
}
