mirror of
https://github.com/picocss/pico.git
synced 2025-04-22 09:26:14 -04:00
67 lines
3.1 KiB
HTML
67 lines
3.1 KiB
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><<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://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>
|
|
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>
|