From bd5a00c61b355c857b5c99323592ca432dea5d0a Mon Sep 17 00:00:00 2001 From: Mitchell Riedstra Date: Fri, 5 Jan 2024 23:18:49 -0500 Subject: wip --- htmx/static/pico-1.5.11/docs/src/grid.html | 67 ++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 htmx/static/pico-1.5.11/docs/src/grid.html (limited to 'htmx/static/pico-1.5.11/docs/src/grid.html') diff --git a/htmx/static/pico-1.5.11/docs/src/grid.html b/htmx/static/pico-1.5.11/docs/src/grid.html new file mode 100644 index 0000000..6083516 --- /dev/null +++ b/htmx/static/pico-1.5.11/docs/src/grid.html @@ -0,0 +1,67 @@ + + + + ${require('./_head.html') + title=`Grid` + description=`.grid enable a minimal grid system with auto-layout columns.` + canonical=`grid.html` + } + + + + ${require('./_nav.html')} + +
+ ${require('./_sidebar.html') active=`grid-link`} + +
+
+
+

Grid

+

.grid enable a minimal grid system with auto-layout columns.

+
+
+
+
1
+
2
+
3
+
4
+
+
+ +
<div class="grid">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+ +
+
+

Columns intentionally collapses below large devices (992px)

+

To go further, discover how to merge Pico with the Bootstrap grid system.

+
+ + +  More about grids + +

As Pico focuses on native HTML elements, we kept this grid system very minimalist.

+

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.

+

If you need a quick way to prototyping or build a complex layout, you can look at Flexbox grid layouts. For example, Bootstrap Grid System only or Flexbox Grid.

+

If you need a light and custom grid, you can look at CSS Grid Generators. For example, CSS Grid Generator, Layoutit! or Griddy.

+

Alternatively, you can learn about CSS Grid.

+
+
+ + ${require('./_footer.html')} + +
+
+ + + + -- cgit v1.2.3