<commit_before>---
layout: page
title:  Grid and layout
category: UI toolkit
---

- [Style](#style)
- [States](#states)
- [Variations](#variations)
{: class="toc"}

<div class="content-50 content-first">

Lorem ipsum dolor sit amet.
{: class="lead-in"}

</div>

<div class="content-50 content-last">
  <h5 class="repo-list-header">Repository</h5>
  <ul class="repo-list">
    <li>
      <i class="cf-icon cf-icon-github"></i>
    </li>
    <li>
      <a href="http://github.com/cfpb/cf-grid"><h4>cf-grid</h4></a>
      <p>Grid in the Capital Framework</p>
    </li>
  </ul>
</div>

<h2 id="style">Style<span class="cf-code-link"><a href="http://cfpb.github.io/cf-grid/docs/">View code <i class="cf-icon cf-icon-external-link"></i></a></span></h2>

{::nomarkdown}
<div class="cols-12">
        <h2>12 columns w/ 1200px max width</h2>
        <section>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div><commit_msg>Re-title Grid example<commit_after>---
layout: page
title:  Grid and layout
category: UI toolkit
---

- [Style](#style)
- [States](#states)
- [Variations](#variations)
{: class="toc"}

<div class="content-50 content-first">

Lorem ipsum dolor sit amet.
{: class="lead-in"}

</div>

<div class="content-50 content-last">
  <h5 class="repo-list-header">Repository</h5>
  <ul class="repo-list">
    <li>
      <i class="cf-icon cf-icon-github"></i>
    </li>
    <li>
      <a href="http://github.com/cfpb/cf-grid"><h4>cf-grid</h4></a>
      <p>Grid in the Capital Framework</p>
    </li>
  </ul>
</div>

<h2 id="style">Style<span class="cf-code-link"><a href="http://cfpb.github.io/cf-grid/docs/">View code <i class="cf-icon cf-icon-external-link"></i></a></span></h2>

{::nomarkdown}
<div class="cols-12">
        <h3>12 column grid</h3>
        <section>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
            <div class="col col-1"><p>one</p></div>
{'fraction_non_alphanumeric': 0.24097331240188383, 'fraction_numerical': 0.02040816326530612, 'mean_word_length': 2.7818991097922847, 'pattern_counts': {'":': 0, '<': 131, '<?xml version=': 0, '>': 131, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7365747', 'n_tokens_mistral': 999, 'n_tokens_neox': 968, 'n_words': 176}