<div class="grid-example">
<div class="usa-grid">
<div class="usa-width-one-whole">1/1</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-half">½</div>
<div class="usa-width-one-half">½</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-third">1/3</div>
<div class="usa-width-one-third">1/3</div>
<div class="usa-width-one-third">1/3</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-fourth">¼</div>
<div class="usa-width-one-fourth">¼</div>
<div class="usa-width-one-fourth">¼</div>
<div class="usa-width-one-fourth">¼</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
</div>
</div>
<div class="grid-example">
<div class="usa-grid">
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat dolore consequatur, debitis eveniet et. Reiciendis, a molestiae totam quis minima aperiam porro laboriosam dignissimos tenetur dolorum voluptas sint aliquid explicabo perspiciatis
quos odio, neque. Molestiae, in dignissimos. Quae laudantium doloribus sapiente, fugit provident quas animi tempore sint, ex deserunt non ullam adipisci ut delectus at incidunt ipsam autem aperiam mollitia tenetur esse perspiciatis molestiae.
Non eum facere, harum modi ratione. Voluptates perferendis repudiandae atque neque, explicabo quidem minima, ipsam. Eveniet.</p>
</div>
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi praesentium nihil vel ratione, est quisquam deleniti perspiciatis quam animi corrupti facilis sit inventore esse, suscipit soluta. Ipsum alias in vitae, at consequatur voluptatibus
hic possimus, aut aliquid incidunt dolorum deserunt rerum, minima magni, dolore quis recusandae quibusdam quo sed eveniet! Facilis harum eius quod commodi minus, quo explicabo ducimus. Fuga aperiam reprehenderit architecto voluptatibus
pariatur.</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia hic, culpa, iusto nostrum ullam quis excepturi non quia perferendis delectus. Inventore deserunt expedita hic quis alias reprehenderit fugiat dolores voluptatibus velit aspernatur
est, fugit quibusdam.</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate, ipsam nostrum id praesentium. Blanditiis aliquid tenetur quae repellendus inventore atque praesentium, unde magnam ea, debitis omnis earum enim nihil non similique delectus
porro. Et.</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores error eos aspernatur aliquam modi, neque mollitia odio! Dolorem odio fugit, incidunt provident vel, laborum, eos enim facilis delectus quaerat dignissimos. Delectus, itaque,
optio..</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente sed adipisci voluptate deserunt earum dolorum a itaque minus qui. Nulla?</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo facilis debitis, laudantium provident quas, ipsam, in, ad amet esse odit quae eum delectus reprehenderit minima.</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus sequi quae mollitia quaerat assumenda repudiandae dolore cupiditate sint aliquid rem similique eos error numquam dolorem tempora, provident?</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odio, ex necessitatibus, earum est at consequatur id, voluptatem veniam amet tempore.</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-two-thirds">
<h3>Two Thirds</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor vero porro, incidunt nulla labore quibusdam, voluptatibus quasi, nisi ab tenetur magni rem illo cupiditate. Magnam iusto culpa accusamus repellendus quisquam deleniti nisi, obcaecati
aliquam, nesciunt magni rerum iure explicabo voluptatum voluptas porro dolorem voluptatibus totam temporibus sunt sed ab soluta! Ipsa, at, recusandae. Dolor tempore, aperiam asperiores aspernatur nesciunt doloribus, dolore sequi perferendis
possimus, quidem sapiente eum eos.</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem omnis, quas recusandae fugit accusantium, laborum, dicta veniam rerum vel eveniet pariatur nostrum ad, officia quisquam minima aliquam at optio eum sapiente aliquid commodi consectetur
doloribus odit quasi deserunt. Quidem, soluta!</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque aut dignissimos soluta unde, accusantium dolore sapiente esse quae nisi pariatur, similique dicta ullam velit, debitis. Voluptatibus, magni ratione enim aliquam ullam reprehenderit
sapiente, at, neque iure unde sunt tenetur sit soluta, praesentium est? Voluptatum quod architecto obcaecati reprehenderit pariatur nihil animi eius porro explicabo, omnis, ipsa minima modi, consequuntur.</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt sit praesentium excepturi hic dignissimos quo doloremque esse minima eaque nulla quos repellendus odit explicabo adipisci sint facere nam maxime, iusto voluptates atque. Pariatur
dignissimos ad tempore et modi quidem facilis ut, unde mollitia.</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nostrum exercitationem assumenda laudantium dolore iste fuga incidunt repudiandae quibusdam vitae, placeat inventore unde fugit. Laudantium facilis, vero blanditiis, hic
obcaecati, optio unde iste tenetur eligendi maxime natus quaerat possimus. Accusamus modi, exercitationem.</p>
</div>
</div>
</div>
<style scoped>
.usa-grid {
background: #f1f1f1;
}
.grid-example .usa-grid>* {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 1em;
background: rgba(0, 191, 231, 0.2);
}
@media screen and (min-width: 600px) {
.grid-example .usa-width-one-twelfth {
padding-right: 0;
padding-left: 0;
}
}
.grid-example:first-of-type .usa-grid {
text-align: center;
}
</style>