Layout

Breakpoints

Fractures has 5 fixed breakpoint prefix to help you build responsive layouts.
Resize this page to see how they work.

sm:flex

0px

sm:none

444px

md:none

696px

lg:none

864px

xl:none

1032px

xxl:none

1360px

Responsive selectors are marked with a purple dot and can be used with any of these prefixes:

sm:selector
md:selector
lg:selector
xl:selector
xxl:selector

Display

.block
.contents
.flex
.flow-root
.grid
.inline
.inline-block
.inline-flex
.inline-grid
.inline-table
.list-item
.none
.run-in
.table
.table-caption
.table-cell
.table-column
.table-column-group
.table-footer-group
.table-header-group
.table-row
.table-row-group
.table-layout-fixed
.float-left
.float-right

Flex

.flex-wrap
.flex-row
.flex-column
.space-around
.space-between
.space-evenly
.flex-center
.flex-y-center
.flex-x-center
.flex-left
.flex-right
.flex-baseline
.flex-top
.flex-bottom
.self-center
.self-x-center
.self-y-center
.self-left
.self-right
.self-baseline
.self-top
.self-bottom
.flex-gap-px
.flex-gap-1
.flex-gap-2
.flex-gap-3
.flex-gap-4
.flex-gap-5
.flex-gap-6
.flex-gap-7
.flex-gap-8
.flex-gap-9
.flex-gap-10
.flex-gap-11
.flex-gap-12
.flex-gap-13
.flex-gap-14
.flex-gap-15
.flex-gap-16
.flex-gap-24
.flex-gap-32
.flex-gap-40
.flex-gap-48
.grow-1
.grow-2
.grow-3
.grow-4
.grow-5
.grow-6
.grow-7
.grow-8
.grow-9
.grow-10
.grow-11
.grow-12

Grid

Experimental
.grid-gap-1
.grid-gap-2
.grid-gap-3
.grid-gap-4
.grid-gap-5
.grid-gap-6
.grid-gap-7
.grid-gap-8
.grid-gap-9
.grid-gap-10
.grid-gap-11
.grid-gap-12
.grid-gap-13
.grid-gap-14
.grid-gap-15
.grid-gap-16
.grid-gap-24
.grid-gap-32
.grid-gap-40
.grid-gap-48
.grid-gap-x-1
.grid-gap-x-2
.grid-gap-x-3
.grid-gap-x-4
.grid-gap-x-5
.grid-gap-x-6
.grid-gap-x-7
.grid-gap-x-8
.grid-gap-x-9
.grid-gap-x-10
.grid-gap-x-11
.grid-gap-x-12
.grid-gap-x-13
.grid-gap-x-14
.grid-gap-x-15
.grid-gap-x-16
.grid-gap-x-24
.grid-gap-x-32
.grid-gap-x-40
.grid-gap-x-48
.grid-gap-y-1
.grid-gap-y-2
.grid-gap-y-3
.grid-gap-y-4
.grid-gap-y-5
.grid-gap-y-6
.grid-gap-y-7
.grid-gap-y-8
.grid-gap-y-9
.grid-gap-y-10
.grid-gap-y-11
.grid-gap-y-12
.grid-gap-y-13
.grid-gap-y-14
.grid-gap-y-15
.grid-gap-y-16
.grid-gap-y-24
.grid-gap-y-32
.grid-gap-y-40
.grid-gap-y-48
.grid-dense-row
.grid-dense-column
.grid-cols-1
.grid-cols-2
.grid-cols-3
.grid-cols-4
.grid-cols-5
.grid-cols-6
.grid-cols-7
.grid-cols-8
.grid-cols-9
.grid-cols-10
.grid-cols-11
.grid-cols-12
.grid-rows-1
.grid-rows-2
.grid-rows-3
.grid-rows-4
.grid-rows-5
.grid-rows-6
.grid-rows-7
.grid-rows-8
.grid-rows-9
.grid-rows-10
.grid-rows-11
.grid-rows-12

Height

.h-0
.h-viewport
Height is 100 viewport height.
.h-px
.h-1
.h-2
.h-3
.h-4
.h-5
.h-6
.h-7
.h-8
.h-9
.h-10
.h-11
.h-11
.h-12
.h-12
.h-13
.h-13
.h-14
.h-14
.h-15
.h-15
.h-16
.h-24
.h-32
.h-40
.h-48
.hp-10
.hp-15
.hp-20
.hp-25
.hp-30
.hp-33
.hp-35
.hp-40
.hp-45
.hp-50
.hp-55
.hp-60
.hp-66
.hp-65
.hp-70
.hp-75
.hp-80
.hp-85
.hp-90
.hp-95
.hp-100
.hmax-0
.hmax-viewport
Max height is 100 viewport height.
.hmax-px
.hmax-1
.hmax-2
.hmax-3
.hmax-4
.hmax-5
.hmax-6
.hmax-7
.hmax-8
.hmax-9
.hmax-10
.hmax-11
.hmax-11
.hmax-12
.hmax-12
.hmax-13
.hmax-13
.hmax-14
.hmax-14
.hmax-15
.hmax-15
.hmax-16
.hmax-24
.hmax-32
.hmax-40
.hmax-48
.hpmax-15
.hpmax-10
.hpmax-20
.hpmax-25
.hpmax-30
.hpmax-33
.hpmax-35
.hpmax-40
.hpmax-45
.hpmax-50
.hpmax-55
.hpmax-60
.hpmax-66
.hpmax-65
.hpmax-70
.hpmax-75
.hpmax-80
.hpmax-85
.hpmax-90
.hpmax-95
.hpmax-100
.hmin-0
.hmin-viewport
Min height is 100 viewport height.
.hmin-px
.hmin-1
.hmin-2
.hmin-3
.hmin-4
.hmin-5
.hmin-6
.hmin-7
.hmin-8
.hmin-9
.hmin-10
.hmin-11
.hmin-11
.hmin-12
.hmin-12
.hmin-13
.hmin-13
.hmin-14
.hmin-14
.hmin-15
.hmin-15
.hmin-16
.hmin-24
.hmin-32
.hmin-40
.hmin-48
.hpmin-15
.hpmin-10
.hpmin-20
.hpmin-25
.hpmin-30
.hpmin-33
.hpmin-35
.hpmin-40
.hpmin-45
.hpmin-50
.hpmin-55
.hpmin-60
.hpmin-66
.hpmin-65
.hpmin-70
.hpmin-75
.hpmin-80
.hpmin-85
.hpmin-90
.hpmin-95
.hpmin-100

Width

.w-0
Width is 0 pixel.
.w-viewport
Width is 100 viewport width.
.w-px
.w-1
.w-2
.w-3
.w-4
.w-5
.w-6
.w-7
.w-8
.w-9
.w-10
.w-11
.w-11
.w-12
.w-12
.w-13
.w-13
.w-14
.w-14
.w-15
.w-15
.w-16
.w-24
.w-32
.w-40
.w-48
.wp-10
.wp-15
.wp-20
.wp-25
.wp-30
.wp-33
.wp-35
.wp-40
.wp-45
.wp-50
.wp-55
.wp-60
.wp-66
.wp-65
.wp-70
.wp-75
.wp-80
.wp-85
.wp-90
.wp-95
.wp-100
.wmax-0
.wmax-viewport
Max width is 100 viewport width.
.wmax-px
.wmax-1
.wmax-2
.wmax-3
.wmax-4
.wmax-5
.wmax-6
.wmax-7
.wmax-8
.wmax-9
.wmax-10
.wmax-11
.wmax-11
.wmax-12
.wmax-12
.wmax-13
.wmax-13
.wmax-14
.wmax-14
.wmax-15
.wmax-15
.wmax-16
.wmax-24
.wmax-32
.wmax-40
.wmax-48
.wpmax-15
.wpmax-10
.wpmax-20
.wpmax-25
.wpmax-30
.wpmax-33
.wpmax-35
.wpmax-40
.wpmax-45
.wpmax-50
.wpmax-55
.wpmax-60
.wpmax-66
.wpmax-65
.wpmax-70
.wpmax-75
.wpmax-80
.wpmax-85
.wpmax-90
.wpmax-95
.wpmax-100
.wmin-0
.wmin-viewport
Min width is 100 viewport width.
.wmin-px
.wmin-1
.wmin-2
.wmin-3
.wmin-4
.wmin-5
.wmin-6
.wmin-7
.wmin-8
.wmin-9
.wmin-10
.wmin-11
.wmin-11
.wmin-12
.wmin-12
.wmin-13
.wmin-13
.wmin-14
.wmin-14
.wmin-15
.wmin-15
.wmin-16
.wmin-24
.wmin-32
.wmin-40
.wmin-48
.wpmin-15
.wpmin-10
.wpmin-20
.wpmin-25
.wpmin-30
.wpmin-33
.wpmin-35
.wpmin-40
.wpmin-45
.wpmin-50
.wpmin-55
.wpmin-60
.wpmin-66
.wpmin-65
.wpmin-70
.wpmin-75
.wpmin-80
.wpmin-85
.wpmin-90
.wpmin-95
.wpmin-100

Position

.absolute
.fixed
.relative
.static
.sticky
.z-0
.z-10
.z-20
.z-30
.z-40
.z-50
.z-60
.z-70
.z-80
.z-90
.z-100
.bottom-0
.bottom-px
.bottom-1
.bottom-2
.bottom-3
.bottom-4
.bottom-5
.bottom-6
.bottom-7
.bottom-8
.bottom-9
.bottom-10
.bottom-11
.bottom-11
.bottom-12
.bottom-12
.bottom-13
.bottom-13
.bottom-14
.bottom-14
.bottom-15
.bottom-15
.bottom-16
.bottom-24
.bottom-32
.bottom-40
.bottom-48
.left-0
.left-px
.left-1
.left-2
.left-3
.left-4
.left-5
.left-6
.left-7
.left-8
.left-9
.left-10
.left-11
.left-11
.left-12
.left-12
.left-13
.left-13
.left-14
.left-14
.left-15
.left-15
.left-16
.left-24
.left-32
.left-40
.left-48
.right-0
.right-px
.right-1
.right-2
.right-3
.right-4
.right-5
.right-6
.right-7
.right-8
.right-9
.right-10
.right-11
.right-11
.right-12
.right-12
.right-13
.right-13
.right-14
.right-14
.right-15
.right-15
.right-16
.right-24
.right-32
.right-40
.right-48
.top-0
.top-px
.top-1
.top-2
.top-3
.top-4
.top-5
.top-6
.top-7
.top-8
.top-9
.top-10
.top-11
.top-11
.top-12
.top-12
.top-13
.top-13
.top-14
.top-14
.top-15
.top-15
.top-16
.top-24
.top-32
.top-40
.top-48

Overflow

.overflow-hidden
.overflow-scroll
.overflow-visible
.overflow-y-hidden
.overflow-y-scroll
.overflow-y-visible
.overflow-x-hidden
.overflow-x-scroll
.overflow-x-visible

Margin

.m-px
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
.m-7
.m-8
.m-9
.m-10
.m-11
.m-11
.m-12
.m-12
.m-13
.m-13
.m-14
.m-14
.m-15
.m-15
.m-16
.m-24
.m-32
.m-40
.m-48
.mr-px
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mr-6
.mr-7
.mr-8
.mr-9
.mr-10
.mr-11
.mr-11
.mr-12
.mr-12
.mr-13
.mr-13
.mr-14
.mr-14
.mr-15
.mr-15
.mr-16
.mr-24
.mr-32
.mr-40
.mr-48
.ml-px
.ml-1
.ml-2
.ml-3
.ml-4
.ml-5
.ml-6
.ml-7
.ml-8
.ml-9
.ml-10
.ml-11
.ml-11
.ml-12
.ml-12
.ml-13
.ml-13
.ml-14
.ml-14
.ml-15
.ml-15
.ml-16
.ml-24
.ml-32
.ml-40
.ml-48
.mt-px
.mt-1
.mt-2
.mt-3
.mt-4
.mt-5
.mt-6
.mt-7
.mt-8
.mt-9
.mt-10
.mt-11
.mt-11
.mt-12
.mt-12
.mt-13
.mt-13
.mt-14
.mt-14
.mt-15
.mt-15
.mt-16
.mt-24
.mt-32
.mt-40
.mt-48
.mb-px
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mb-6
.mb-7
.mb-8
.mb-9
.mb-10
.mb-11
.mb-11
.mb-12
.mb-12
.mb-13
.mb-13
.mb-14
.mb-14
.mb-15
.mb-15
.mb-16
.mb-24
.mb-32
.mb-40
.mb-48
.my-px
.my-1
.my-2
.my-3
.my-4
.my-5
.my-6
.my-7
.my-8
.my-9
.my-10
.my-11
.my-11
.my-12
.my-12
.my-13
.my-13
.my-14
.my-14
.my-15
.my-15
.my-16
.my-24
.my-32
.my-40
.my-48
.mx-auto
.mx-px
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mx-6
.mx-7
.mx-8
.mx-9
.mx-10
.mx-11
.mx-11
.mx-12
.mx-12
.mx-13
.mx-13
.mx-14
.mx-14
.mx-15
.mx-15
.mx-16
.mx-24
.mx-32
.mx-40
.mx-48

Padding

.p-px
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7
.p-8
.p-9
.p-10
.p-11
.p-11
.p-12
.p-12
.p-13
.p-13
.p-14
.p-14
.p-15
.p-15
.p-16
.p-24
.p-32
.p-40
.p-48
.pr-px
.pr-1
.pr-2
.pr-3
.pr-4
.pr-5
.pr-6
.pr-7
.pr-8
.pr-9
.pr-10
.pr-11
.pr-11
.pr-12
.pr-12
.pr-13
.pr-13
.pr-14
.pr-14
.pr-15
.pr-15
.pr-16
.pr-24
.pr-32
.pr-40
.pr-48
.pl-px
.pl-1
.pl-2
.pl-3
.pl-4
.pl-5
.pl-6
.pl-7
.pl-8
.pl-9
.pl-10
.pl-11
.pl-11
.pl-12
.pl-12
.pl-13
.pl-13
.pl-14
.pl-14
.pl-15
.pl-15
.pl-16
.pl-24
.pl-32
.pl-40
.pl-48
.pt-px
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.pt-6
.pt-7
.pt-8
.pt-9
.pt-10
.pt-11
.pt-11
.pt-12
.pt-12
.pt-13
.pt-13
.pt-14
.pt-14
.pt-15
.pt-15
.pt-16
.pt-24
.pt-32
.pt-40
.pt-48
.pb-px
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-6
.pb-7
.pb-8
.pb-9
.pb-10
.pb-11
.pb-11
.pb-12
.pb-12
.pb-13
.pb-13
.pb-14
.pb-14
.pb-15
.pb-15
.pb-16
.pb-24
.pb-32
.pb-40
.pb-48
.py-px
.py-1
.py-2
.py-3
.py-4
.py-5
.py-6
.py-7
.py-8
.py-9
.py-10
.py-11
.py-11
.py-12
.py-12
.py-13
.py-13
.py-14
.py-14
.py-15
.py-15
.py-16
.py-24
.py-32
.py-40
.py-48
.px-px
.px-1
.px-2
.px-3
.px-4
.px-5
.px-6
.px-7
.px-8
.px-9
.px-10
.px-11
.px-11
.px-12
.px-12
.px-13
.px-13
.px-14
.px-14
.px-15
.px-15
.px-16
.px-24
.px-32
.px-40
.px-48