diff --git a/docs/navigation.php b/docs/navigation.php index 0dc7b0548..72ea65e06 100644 --- a/docs/navigation.php +++ b/docs/navigation.php @@ -41,7 +41,6 @@ return [ ], 'Floats' => 'floats', 'Forms' => 'forms', - 'Grid' => 'grid', 'Interactivity' => [ 'Cursor' => 'cursor', 'Resize' => 'resize', @@ -83,6 +82,7 @@ return [ 'Buttons' => 'examples/buttons', 'Cards' => 'examples/cards', 'Forms' => 'examples/forms', + 'Grids' => 'examples/grids', 'Navigation' => 'examples/navigation', ], ]; diff --git a/docs/source/docs/examples/grids.blade.md b/docs/source/docs/examples/grids.blade.md new file mode 100644 index 000000000..59d6070bb --- /dev/null +++ b/docs/source/docs/examples/grids.blade.md @@ -0,0 +1,244 @@ +--- +extends: _layouts.documentation +title: "Grids" +description: Examples of building grid layouts with Tailwind CSS. +--- + +Tailwind doesn't include purpose-built grid classes out of the box, but grid layouts are simple to build using the existing [Flexbox](/docs/flexbox-display) and [width](/docs/width) utilities. + +### Basic Grids + +Use the existing [Flexbox](/docs/flexbox-display) and [percentage width](/docs/width) utilities to construct basic grids. + +@component('_partials.code-sample', ['lang' => 'html']) + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+@endcomponent + +### Responsive Grids + +Use the responsive variants of the width utilities to build responsive grid layouts. + +@component('_partials.responsive-code-sample') +@slot('none') +
+
+
+
+
+
+
+
+@endslot +@slot('sm') +
+
+
+
+
+
+
+
+@endslot +@slot('md') +
+
+
+
+
+
+
+
+@endslot +@slot('lg') +
+
+
+
+
+
+
+
+@endslot +@slot('xl') +
+
+
+
+
+
+
+
+@endslot +@slot('code') +
+
+
+
+
+
+
+
+@endslot +@endcomponent + +### Mixed Column Sizes + +Mix different percentage width utilities to build mixed size grids. + +@component('_partials.code-sample', ['lang' => 'html']) + +
+
+
+
+ + +
+
+
+
+
+@endcomponent + +### Wrapping Columns + +Add `flex-wrap` to your column container to allow columns to wrap when they run out of room. + +@component('_partials.code-sample', ['lang' => 'html']) +
+
+
+
+
+
+
+@endcomponent + +### Column Spacing + +Add a negative horizontal margin like `-mx-2` to your column container and an equal horizontal padding like `px-2` to each column to add gutters. + +@component('_partials.code-sample', ['lang' => 'html']) +
+
+
+
+
+
+
+
+
+
+
+@endcomponent + +### Automatic Column Widths + +Use `flex-1` instead of an explicit width on your columns to have them size automatically to fill the row. + +@component('_partials.code-sample', ['lang' => 'html']) + +
+
+
+ + +
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+@endcomponent + +### Column Order + +Use `flex-reverse` to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens. + +@component('_partials.code-sample', ['lang' => 'html']) +
+
+
+
+@endcomponent + +### Simple Offsets + +Use auto margin utilities like `ml-auto` and `mr-auto` to offset columns in a row. + +@component('_partials.code-sample', ['lang' => 'html']) +
+
+
+
+@endcomponent diff --git a/docs/source/docs/grid.blade.md b/docs/source/docs/grid.blade.md deleted file mode 100644 index 8c4a6012d..000000000 --- a/docs/source/docs/grid.blade.md +++ /dev/null @@ -1,244 +0,0 @@ ---- -extends: _layouts.documentation -title: "Grid" -description: null ---- - -@include('_partials.work-in-progress-example') - -Basic grid example: - -
-
.flex.flex-wrap
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- -Columns don't need to fill a row: - -
-
.flex.flex-wrap
-
-
-
- .md:w-1/4 -
-
-
-
- .md:w-1/4 -
-
-
-
- .md:w-1/4 -
-
-
-
- -Columns can be different widths: - -
-
.flex.flex-wrap
-
-
-
- .md:w-1/4 -
-
-
-
- .md:w-1/2 -
-
-
-
- .md:w-1/4 -
-
-
-
- -Rows can overflow and wrap: - -
-
.flex.flex-wrap
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- .md:w-1/3 -
-
-
-
- -Columns can have gutters: - -
-
.flex.flex-wrap.-mx-4
-
-
-
-
.w-full
-
.md:w-1/3
-
.px-4
-
-
-
-
-
.w-full
-
.md:w-1/3
-
.px-4
-
-
-
-
-
.w-full
-
.md:w-1/3
-
.px-4
-
-
-
-
- -Column widths can be automatic: - -
-
.flex.flex-wrap
-
-
-
-
.w-1/4
-
.md:flex-1
-
.md:w-auto
-
-
-
-
-
.w-1/4
-
.md:flex-1
-
.md:w-auto
-
-
-
-
-
.w-1/4
-
.md:flex-1
-
.md:w-auto
-
-
-
-
-
.w-1/4
-
.md:flex-1
-
.md:w-auto
-
-
-
-
-
.w-1/4
-
.md:flex-1
-
.md:w-auto
-
-
-
-
- -Fixed width columns are still respected even if a smaller screen has auto column widths: - -
-
.flex.flex-wrap
-
-
-
-
.flex-grow
-
.md:w-1/6
-
.md:flex-none
-
-
-
-
-
.flex-grow
-
.md:w-1/6
-
.md:flex-none
-
-
-
-
-
.flex-grow
-
.md:w-1/6
-
.md:flex-none
-
-
-
-
-
.flex-grow
-
.md:w-1/6
-
.md:flex-none
-
-
-
-
-
.flex-grow
-
.md:w-1/6
-
.md:flex-none
-
-
-
-
- -Use margin auto utilities to accomplish offsets: - -
-
.flex.flex-wrap
-
-
-
-
.md:w-1/3
-
.md:ml-auto
-
-
-
-
-
.md:w-1/6
-
.md:mr-auto
-
-
-
-