Scaffolding
Scaffolding is a simple base grid system with semantic class names which makes remembering them much easier! There is also a non-semantic last class to add to the last div in a row. This class simply removes the right margin.
<div class="one_full">some content to be wrapped...<div>
1/2
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_half">some content to be wrapped...<div>
1/2
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_half last">some content to be wrapped...<div>
1/3
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_third">some content to be wrapped...<div>
1/3
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_third">some content to be wrapped...<div>
1/3
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_third last">some content to be wrapped...<div>
2/3
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="two_third">some content to be wrapped...<div>
1/3
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna.
<div class="one_third last">some content to be wrapped...<div>
1/4
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_quarter"> some content to be wrapped... <div>
1/4
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_quarter"> some content to be wrapped... <div>
1/4
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_quarter"> some content to be wrapped... <div>
1/4
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis.
<div class="one_quarter last"> some content to be wrapped... <div>