mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge pull request #276 from tailwindcss/move-grid-to-examples
Make grid documentation better than "absolutely awful"
This commit is contained in:
Adam Wathan
GitHub
commit
1307bb20b6
@ -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',
|
||||
],
|
||||
];
|
||||
|
||||
244
docs/source/docs/examples/grids.blade.md
Normal file
244
docs/source/docs/examples/grids.blade.md
Normal file
@ -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'])
|
||||
<!-- Full width column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-full bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Two columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/2 bg-grey-light h-12"></div>
|
||||
<div class="w-1/2 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Three columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/3 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 bg-grey h-12"></div>
|
||||
<div class="w-1/3 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Four columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Five columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-1/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-1/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Six columns -->
|
||||
<div class="flex">
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
<div class="w-1/6 bg-grey-light h-12"></div>
|
||||
<div class="w-1/6 bg-grey h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
|
||||
### Responsive Grids
|
||||
|
||||
Use the responsive variants of the width utilities to build responsive grid layouts.
|
||||
|
||||
@component('_partials.responsive-code-sample')
|
||||
@slot('none')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-full mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('sm')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('md')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/3 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('lg')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/4 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/2 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('xl')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="h-12 w-1/6 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@slot('code')
|
||||
<div class="flex flex-wrap">
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey"></div>
|
||||
<div class="none:w-full sm:w-1/2 md:w-1/3 lg:w-1/2 xl:w-1/6 mb-4 bg-grey-light"></div>
|
||||
</div>
|
||||
@endslot
|
||||
@endcomponent
|
||||
|
||||
### Mixed Column Sizes
|
||||
|
||||
Mix different percentage width utilities to build mixed size grids.
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<!-- Narrower side column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="w-3/4 bg-grey h-12"></div>
|
||||
<div class="w-1/4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Wide center column -->
|
||||
<div class="flex">
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
<div class="w-3/5 bg-grey-light h-12"></div>
|
||||
<div class="w-1/5 bg-grey h-12"></div>
|
||||
</div>
|
||||
@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'])
|
||||
<div class="flex flex-wrap -mb-4">
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey h-12"></div>
|
||||
<div class="w-1/3 mb-4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@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'])
|
||||
<div class="flex -mx-2">
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey-light h-12"></div>
|
||||
</div>
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey h-12"></div>
|
||||
</div>
|
||||
<div class="w-1/3 px-2">
|
||||
<div class="bg-grey-light h-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
@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'])
|
||||
<!-- Full width column -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Five columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Seven columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
|
||||
<!-- Eleven columns -->
|
||||
<div class="flex mb-4">
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
<div class="flex-1 bg-grey h-12"></div>
|
||||
<div class="flex-1 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@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'])
|
||||
<div class="flex md:flex-reverse flex-wrap">
|
||||
<div class="w-full md:w-3/4 bg-grey h-12"></div>
|
||||
<div class="w-full md:w-1/4 bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@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'])
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/3 ml-auto bg-grey h-12"></div>
|
||||
<div class="w-1/3 mr-auto bg-grey-light h-12"></div>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -1,244 +0,0 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Grid"
|
||||
description: null
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
Basic grid example:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Columns don't need to fill a row:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Columns can be different widths:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
.md:w-1/2
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Rows can overflow and wrap:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Columns can have gutters:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap.-mx-4</div>
|
||||
<div class="flex flex-wrap -mx-4">
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Column widths can be automatic:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/4 md:flex-1 md:w-auto">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.w-1/4</div>
|
||||
<div>.md:flex-1</div>
|
||||
<div>.md:w-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4 md:flex-1 md:w-auto">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.w-1/4</div>
|
||||
<div>.md:flex-1</div>
|
||||
<div>.md:w-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4 md:flex-1 md:w-auto">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.w-1/4</div>
|
||||
<div>.md:flex-1</div>
|
||||
<div>.md:w-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4 md:flex-1 md:w-auto">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.w-1/4</div>
|
||||
<div>.md:flex-1</div>
|
||||
<div>.md:w-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/4 md:flex-1 md:w-auto">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.w-1/4</div>
|
||||
<div>.md:flex-1</div>
|
||||
<div>.md:w-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Fixed width columns are still respected even if a smaller screen has auto column widths:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex-grow md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.flex-grow</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.flex-grow</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.flex-grow</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.flex-grow</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.flex-grow</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Use margin auto utilities to accomplish offsets:
|
||||
|
||||
<div class="bg-smoke-light font-semibold text-sm mb-6">
|
||||
<div class="text-slate p-4 leading-none">.flex.flex-wrap</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/3 md:ml-auto">
|
||||
<div class="text-center py-4 bg-slate-dark text-white">
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.md:ml-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 md:mr-auto">
|
||||
<div class="text-center py-4 bg-slate text-white">
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:mr-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user