@picocss/pico
Version:
Minimal CSS Framework for semantic HTML
68 lines (60 loc) • 3.13 kB
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><<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>
<p>To go further, discover how to <a href="https://picocss.com/examples/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>
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>