Fix some stuff with things not wrapping right
This commit is contained in:
Adam Wathan
parent
df6f627805
commit
d662678ae5
1 changed files with 143 additions and 105 deletions
|
|
@ -7,40 +7,46 @@ title: "Grid"
|
|||
|
||||
Basic grid example:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-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-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Columns don't need to fill a row:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:w-1/4
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,20 +54,23 @@ Columns don't need to fill a row:
|
|||
|
||||
Columns can be different widths:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:w-1/2
|
||||
<div class="w-full md:w-1/2">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.md:w-1/2
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
<div class="w-full md:w-1/4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/4
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,30 +78,65 @@ Columns can be different widths:
|
|||
|
||||
Rows can overflow and wrap:
|
||||
|
||||
<div class="flex flex-wrap mb-6">
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-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-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
|
||||
Columns can have gutters:
|
||||
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex.pull-x-4</div>
|
||||
<div class="flex flex-wrap pull-x-4">
|
||||
<div class="flex-none w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.flex-none</div>
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
<div class="flex-none w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
<div>.flex-none</div>
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:w-1/3
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:w-1/3
|
||||
<div class="flex-none w-full md:w-1/3 px-4">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.flex-none</div>
|
||||
<div>.w-full</div>
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.px-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,77 +144,72 @@ Rows can overflow and wrap:
|
|||
|
||||
Column widths can be automatic:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="w-1/6 md:flex-fill">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:flex-fill
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-1/4 md:flex-fill">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.w-1/4.md:flex-fill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 md:flex-fill">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:flex-fill
|
||||
<div class="w-1/4 md:flex-fill">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.w-1/4.md:flex-fill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 md:flex-fill">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:flex-fill
|
||||
<div class="w-1/4 md:flex-fill">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.w-1/4.md:flex-fill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 md:flex-fill">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
.md:flex-fill
|
||||
<div class="w-1/4 md:flex-fill">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
.w-1/4.md:flex-fill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/6 md:flex-fill">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
.md:flex-fill
|
||||
<div class="w-1/4 md:flex-fill">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
.w-1/4.md:flex-fill
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Fixed width columns are still respected even if a smaller screen has auto column widths:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="flex-center h-24 bg-dark-softer text-light">
|
||||
<div>
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.flex-fill</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="flex-center h-24 bg-dark-soft text-light">
|
||||
<div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
<div>.flex-fill</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="flex-center h-24 bg-dark-softer text-light">
|
||||
<div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.flex-fill</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="flex-center h-24 bg-dark-soft text-light">
|
||||
<div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
<div>.flex-fill</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="flex-center h-24 bg-dark-softer text-light">
|
||||
<div>
|
||||
<div class="flex-fill md:w-1/6 md:flex-none">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.flex-fill</div>
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:flex-none</div>
|
||||
|
|
@ -182,18 +221,17 @@ Fixed width columns are still respected even if a smaller screen has auto column
|
|||
|
||||
Use margin auto utilities to accomplish offsets:
|
||||
|
||||
<div class="flex mb-6">
|
||||
<div class="w-full md:w-1/3 md:ml-auto">
|
||||
<div class="flex-center h-16 bg-dark-soft text-light">
|
||||
<div>
|
||||
<div class="bg-light-softer text-medium text-sm py-4 mb-6">
|
||||
<div class="text-dark-soft mb-2 px-4 leading-none">.flex</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="w-full md:w-1/3 md:ml-auto">
|
||||
<div class="text-center py-4 bg-dark-soft text-light">
|
||||
<div>.md:w-1/3</div>
|
||||
<div>.md:ml-auto</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 md:mr-auto">
|
||||
<div class="flex-center h-16 bg-dark-softer text-light">
|
||||
<div>
|
||||
<div class="w-full md:w-1/3 md:mr-auto">
|
||||
<div class="text-center py-4 bg-dark-softer text-light">
|
||||
<div>.md:w-1/6</div>
|
||||
<div>.md:mr-auto</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue