picocss/docs/src/grid.html

<!doctype html>
<html lang="en">
  <head>
    ${require('./_head.html') 
      title=`Grid`
      description=`.grid enable a minimal grid system with auto-layout columns.`
      canonical=`grid.html`
    }
  </head>

  <body>
    ${require('./_nav.html')}
    
    <main class="container" id="docs">
      ${require('./_sidebar.html') active=`grid-link`}
      
      <div role="document">
        <section id="grid">
          <hgroup>
            <h1>Grid</h1>
            <h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>
          </hgroup>
          <article aria-label="Grid example">
            <div class="grid">
              <div>1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
            </div>
            <footer class="code">

<pre><code>&lt;<b>div</b> <i>class</i>=<u>"grid"</u>&gt;
  &lt;<b>div</b>&gt;1&lt;/<b>div</b>&gt;
  &lt;<b>div</b>&gt;2&lt;/<b>div</b>&gt;
  &lt;<b>div</b>&gt;3&lt;/<b>div</b>&gt;
  &lt;<b>div</b>&gt;4&lt;/<b>div</b>&gt;
&lt;/<b>div</b>&gt;</code></pre>

            </footer>
          </article>
          <p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>
          <p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p>
          <details>
            <summary>
              <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="12" y1="16" x2="12" y2="12"></line>
                <line x1="12" y1="8" x2="12.01" y2="8"></line>
              </svg>
              &nbsp;More about grids
            </summary>
            <p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>
            <p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>
            <p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>
            <p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>
            <p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>
          </details>
        </section>

        ${require('./_footer.html')}
        
      </div>
    </main>
    <script src="js/commons.min.js"></script>
    <script src="js/grid.min.js"></script>
  </body>
</html>
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<!doctype html>`
			`<html lang="en">`
			`<head>`
			`${require('./_head.html')`
chore: upgrade `html-includes` 2023-12-28 16:26:59 +07:00			title=`Grid`
			description=`.grid enable a minimal grid system with auto-layout columns.`
			canonical=`grid.html`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`}`
			`</head>`

			`<body>`
			`${require('./_nav.html')}`

			`<main class="container" id="docs">`
chore: upgrade `html-includes` 2023-12-28 16:26:59 +07:00			${require('./_sidebar.html') active=`grid-link`}
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00
			`<div role="document">`
			`<section id="grid">`
			`<hgroup>`
			`<h1>Grid</h1>`
			`<h2><code>.grid</code> enable a minimal grid system with auto-layout columns.</h2>`
			`</hgroup>`
			`<article aria-label="Grid example">`
			`<div class="grid">`
			`<div>1</div>`
			`<div>2</div>`
			`<div>3</div>`
			`<div>4</div>`
			`</div>`
			`<footer class="code">`

			`<pre><code><<b>div</b> <i>class</i>=<u>"grid"</u>>`
			`<<b>div</b>>1</<b>div</b>>`
			`<<b>div</b>>2</<b>div</b>>`
			`<<b>div</b>>3</<b>div</b>>`
			`<<b>div</b>>4</<b>div</b>>`
			`</<b>div</b>></code></pre>`

			`</footer>`
			`</article>`
			`<p>Columns intentionally collapses below large devices <code>(<u>992px</u>)</code></p>`
chore: update example links 2023-04-09 10:50:09 +07:00			`<p>To go further, discover how to <a href="https://codesandbox.io/s/github/picocss/examples/tree/master/v1-bootstrap-grid">merge Pico with the Bootstrap grid system</a>.</p>`
Revert "Merge branch 'master' into dev" This reverts commit 6a6d67dbab230a058b494f6a468ed5f4423f1c4c, reversing changes made to ba4bd765d8fb28466d816c098b03476754c13fc3. 2021-12-19 09:50:55 +07:00			`<details>`
			`<summary>`
			`<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">`
			`<circle cx="12" cy="12" r="10"></circle>`
			`<line x1="12" y1="16" x2="12" y2="12"></line>`
			`<line x1="12" y1="8" x2="12.01" y2="8"></line>`
			`</svg>`
			` More about grids`
			`</summary>`
			`<p>As Pico focuses on native HTML elements, we kept this grid system very minimalist.</p>`
			`<p>A complete grid system in flexbox, with all the ordering, offsetting and, breakpoints utilities, can be heavier than the total size of the Pico library. Not really in the Pico spirit.</p>`
			`<p>If you need a quick way to prototyping or build a complex layout, you can look at <strong>Flexbox grid layouts</strong>. For example, <a href="https://getbootstrap.com/docs/4.2/getting-started/contents/">Bootstrap Grid System only</a> or <a href="http://flexboxgrid.com/">Flexbox Grid</a>.</p>`
			`<p>If you need a light and custom grid, you can look at <strong>CSS Grid Generators</strong>. For example, <a href="https://cssgrid-generator.netlify.com/">CSS Grid Generator</a>, <a href="http://grid.layoutit.com/">Layoutit!</a> or <a href="https://griddy.io/">Griddy</a>.</p>`
			`<p>Alternatively, you can <a href="https://learncssgrid.com/">learn about CSS Grid</a>.</p>`
			`</details>`
			`</section>`

			`${require('./_footer.html')}`

			`</div>`
			`</main>`
			`<script src="js/commons.min.js"></script>`
			`<script src="js/grid.min.js"></script>`
			`</body>`
			`</html>`