CSS3 WEB DESIGN CHEAT SHEET CSS SYNTAX, COLORS & UNITS

Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

C CSS Syntax C CSS Colors

COLOR EXAMPLE
GENERAL SYNTAX COLOR PROPERTIES

tag [attributes] #id .class :pseudoclass ::pseudoelement { color: color RGB 237 + 63 + 0 = RGB(237, 63, 0)
HSL 11 + 255 + 119 = HSL(11, 255, 119)
selector : value ; opacity: 1 alpha
} COMMENTS (ANNOTATIONS)
COLOR MODELS
/* comment */ KEYWORDS
S CSS Selectors EXAMPLE /* IE sucks */
SELECTORS & COMBINATORS
colorkey transparent currentColor
NUMERIC FORMAT
# element with id="unique" #unique EXAMPLES

. elements with class="c1" .c1 RGB( red , green , blue ) RGB(65, 106, 225)
* all elements inside of div (universal) div * # red_hex green_hex blue_hex #416AE1 short form: #46E
inner div elements inside of div (descendant) div div HSL( hue , saturation , lightness ) HSL(159, 185, 145)
> direct childs of div (child) div > div WITH ALPHA CHANNEL EXAMPLES

+ adjacents elements (adjacent sibling) div + div RGBA( red , green , blue , alpha ) RGBA(65, 106, 225, 0.5)
~ siblings elements at same level (general sibling) div ~ div HSLA( hue , saturation , lightness , alpha ) HSLA(159, 185, 145, 1)
ATTRIBUTES IGNORE CASE SENSITIVE [attr="..." i] COLOR COMPONENTS
[attr] elements with attr attribute present red green blue numeric value between [0 ... 255]
[attr="val"] elements with attr= attribute with value val "val" red_hex green_hex blue_hex hexadecimal value [00 ... FF]
[attr~="val"] elements with attr~= that contains val "abc val xyz" hue numeric value (degrees) between [0 ... 360deg]
[attr|="es"] elements with attr|= that contains es-* "en-US es-ES" saturation lightness percentage values [0%...100%]
[attr*="val"] elements with attr*= that includes val "equivalent-is-" alpha number value between [0.0 ... 1.0]
[attr^="val"] elements with attr^= that begins with val "value-is-..."
[attr$="val"] elements with attr$= that ends with val "in-interval" V CSS Values & Units IMPORTANT

PSEUDOCLASSES RESETTING ALL PROPERTIES property: value !important

all: initial inherit unset EXAMPLE color:red!important;
:link links that have not yet been visited
LINKS

:visited links that has been visited COMMON VALUES

MATHEMATICAL EXPRESSIONS
:hover user move mouse/pointer over element initial property's initial value
USER ACTION

calc( value1 op value2 ... )

:active element is being activated by user inherit computed value on parent EXAMPLE calc(200px + 10%)
:focus element has the focus (foreground) unset initial or inherit (depending)
:enabled :disabled on/off input state FONT-RELATIVE SIZES VIEWPORT SIZES
USER INTERFACE

:checked elements toggled "on" by user em computed value on current vw viewport width %
:indeterminate input on indeterminate state ex x-height of lowercase "x" vh viewport height %
:read-only :read-write readonly input or modiable ch advance measure of "0" glyph vmin smaller (vw or vh)
:placeholder-shown inputs that shows placeholder at now rem computed value on root elem vmax larger (vw or vh)
:default default elements for form (input, option, ...) ABSOLUTE SIZES ANGLES DURATIONS

:valid :invalid userdata pass/not pass check validation px pixels deg degrees [0..360] s seconds
:in-range :out-of-range userdata in range/out of range cm centimeters grad gradians [0..400] ms millisecs
:required :optional elements required/optional for submit mm millimeters rad radians [0..6.28] PERCENTAGES

:rst-child rst child of group of elements ~ :nth-child(1) Q quarter-mm rad turns [0.0..1.0] value %
STRUCTURAL
CHILD ELEMENTS

:last-child last child of group of elements ~ :nth-last-child(1) in inches CUSTOM PROPERTIES (CSS VARIABLES) EXAMPLE 75%

:nth-child(n) nth child of group of elements odd

n even pc picas DECLARING USING

th
:nth-last-child(n) last n child of group of elements expr pt points -- varname : value ; var( -- varname , fallback ... )
EXAMPLE --size: 100px; EXAMPLE calc(var(--size, 50px) * 2);
:only-child unique child ~ :rst-child:last-child
:rst-of-type rst child of same type M CSS Media Features
CHILD OF SAME TYPE

:last-of-type last child of same type VIEWPORT SIZE DEVICE SIZE

:nth-of-type(n) nth child of same type MIN MAX width size MIN MAX device-width size
:nth-last-of-type(n) last nthchild (same type) MIN MAX height size MIN MAX device-height size
:only-of-type unique child (same type)
legend ASPECT RATIO
:root root element of the document
OTHERS

optional keyword MIN MAX aspect-ratio ratio MIN MAX device-aspect-ratio ratio
:empty element without contents
:not(x) not match by x selector keyword COLORS
OTHERS

:target is the target of anchor URL wide unsupport MIN MAX color number MIN MAX color-index number
:lang(x) elements in x language shorthand value OTHERS
EXAMPLES
PSEUDOELEMENTS userdata value MIN MAX monochrome number device-min-width: 640px
::rst-line rst line of text element detailed value MIN MAX resolution dpi/dpcm device-aspect-ratio: 16/9
::rst-letter rst letter of text element default value orientation portrait landscape max-color-index:256
pseudoclass min-resolution:300dpi
scan progressive interlace min-monochrome:2
pseudoelement grid number grid:1
 CSS3 WEB DESIGN CHEAT SHEET FONTS, TEXT, SPEECH & RULES
Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

GENERIC FONT
T CSS Text L3
serif sans-serif cursive fantasy monospace
F Fonts TRANSFORMING TEXT
EXAMPLE font-family: Verdana, Arial, sans-serif;
FONTS (TYPOGRAPHY) text-transform: none capitalize uppercase lowercase full-width
font-family: font1 , font2 , font3 ..., genericfont WHITE SPACES

font-size: size % ,
white-space: normal pre nowrap pre-wrap pre-line
smaller larger tab-size: 8 number size
REL

xx-small x-small small medium large x-large xx-large

ABS

LINE BREAKING & WORD BOUNDARIES

font-size-adjust: none number line-break: auto loose normal strict
font-style: normal italic oblique word-break: normal keep-all break-all
font-synthesis: none weight style BREAKING WORDS
font-variant: none small-caps hyphens: none manual auto
font-weight: normal bold word-wrap: normal break-word
lighter bolder
REL

overow-wrap: normal break-word

100 200 300 400 500 600 700 800 900
ABS

ALIGNMENT & JUSTIFICATION

font: style variant weight stretch size/ line-height family text-align: left right center justify start end match-parent
caption icon menu message-box small-caption status-bar
text-align-last: auto start end left right center justify
https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400 text-justify: auto none inter-word distribute
S Speech Media SPACING
VOLUME/SPEAK word-spacing: normal size
volume: number % silent x-soft soft medium loud x-loud letter-spacing: normal size
speak: normal none spell-out EDGE EFFECTS
PAUSE CUE
text-indent: size hanging each-line
pause-before: 0 time % cue-before: none url( snd.mp3 )
URI

hanging-punctuation: none rst last force-end allow-end

pause-after: 0 time % cue-after: none url( snd.mp3 )
URI

T CSS Text Decoration

pause: before after cue: before after
LEVEL 2 (LEGACY)
MIXING/SPATIAL

play-during: auto none url( snd.mp3 ) mix repeat text-decoration: none underline overline line-through
URI

LEVEL 3
azimuth: angle center left-side far-left left center-left
LFT

right-side far-right right center-right text-decoration-line: none underline overline line-through blink
RGT

behind leftwards rightwards text-decoration-color: currentColor color

elevation: angle below level above lower higher text-decoration-style: solid double dotted dashed wavy
ABS

REL

VOICE CHARACTERISTICS
text-decoration-skip: none objects spaces ink edges
box-decoration
speech-rate: number x-slow slow medium fast x-fast
ABS

slower faster text-decoration: none line style color

REL

STATUS
voice-family: voice1 , voice2 , voice3 ..., genericvoice text-underline-position: auto under left right
EMPHASIS MARKS
lled open
pitch: frequency x-low low medium high x-high EXAMPLE open circle;
pitch-range: 50 number text-emphasis-style: none string
GENERIC VOICE
richness: 50 number status dot circle double-circle triangle sesame
male female child
stress: 50 number text-emphasis-color: currentColor color
EXAMPLE voice-family: Romeo, male;
SPEECH text-emphasis-position: over under left right
speak-punctuation: none code text-emphasis: style color
speak-numeral: continuous digits TEXT SHADOW

speak-header: once always text-shadow: none pos-x pos-y blur color

@ CSS Rules
serif font monospaced font
FONT LOADING MEDIA QUERIES (RESPONSIVE DESIGN)

@font-face { sans serif font fantasy font

@media all screen print and (...) {
font-family: font ; property: value; LINE HEIGHT CALCULATIONS (LEGACY)
src: url( le.woff ) format("woff") , }
Media features
line-height: number % size normal
url( le.ttf ) format("truetype") ; EXAMPLE @media screen and (max-width: 640px) { ... }vertical-align: size % baseline middle sub super
unicode-range: U+000-27FF ; CSS IMPORT RULES text-top text-bottom top bottom
}
@import "index.css";
FONT FORMATS CSS CONDITIONAL
@import url("index.css");
embedded-opentype truetype opentype svg woff woff2 @supports not ( feature ) or and ... {
@import url("print.css") print;
EXAMPLE url(le.ttf) format("truetype");
property: value;
}
EXAMPLE @supports not ( display: exbox ) { .nav { display:block } }
 CSS3 WEB DESIGN CHEAT SHEET BOX MODEL: BORDERS, BACKGROUNDS & IMAGES
Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

B CSS Box Model B CSS Borders SPECIFIC SHORTHANDS

DIMENSIONS BORDERS
border-top-*
width: auto size % height: auto size % border-width: size thin medium thick border-right-*
min-width: 0 size % min-height: 0 size % border-style: none border-style hidden border-bottom-*
border-left-*
max-width: none size % max-height: none size % border-color: currentColor color
MARGINS/PADDINGS SIDE BORDER SHORTHAND BORDER STYLES
SPECIFIC MARGINS SPECIFIC PADDINGS
border-top: width style color solid
margin-top: 0 size % padding-top: 0 size % border-right: width style color dotted
margin-right: 0 size % padding-right: 0 size % border-bottom: width style color
margin-bottom: 0 size % padding-bottom: 0 size % dashed
border-left: width style color
margin-left: 0 size % padding-left: 0 size % MAIN SHORTHAND double
MARGIN SHORTHAND PADDING SHORTHAND
border: width style color groove
margin: top right bottom left padding: top right bottom left
4P

4P

ridge
top left right bottom top left right bottom
3P

3P

B Rounded Corners inset

top bottom left right top bottom left right
2P

2P

SPECIFIC CORNERS
top right bottom left top right bottom left outset
1P

1P

border-top-left-radius: 0 size %
OVERFLOW/VISIBILITY
border-top-right-radius: 0 size % 2-PARAMETER FORMAT
overow-x: visible hidden scroll auto no-display no-content
border-bottom-right-radius: 0 size % size-h size-v
overow-y: visible hidden scroll auto no-display no-content size-v
border-bottom-left-radius: 0 size % 1-PARAMETER
size-h
overow: overow-x overow-y size-h = size-v
MAIN SHORTHAND

visibility: visible hidden collapse border-radius: 4P top-left top-right bottom-right bottom-left

top-left top-right bottom-left bottom-right
3P

BOX TYPES (DISPLAY) CSS MODEL BOX

top-left bottom-right top-right bottom-left
2P

display: inline none run-in

top-left top-right bottom-right bottom-left
1P

inline-block block
BLK

size-h MAIN SHORTHAND WITH HORIZONTAL/VERTICAL RADIUS

inline-list-item list-item
LST

content border-radius: border-radius / border-radius

inline-table table table-cell
TBL

table-row table-caption padding BORDER IMAGE WIDTH

top
GRD

inline-grid grid subgrid IMAGE SLICE

auto size number % left center right
inline-ex ex margin
FLX

number %
B CSS Border Image bottom
I CSS Images IMAGE OUTSET
START SIZE BORDER IMAGE
GRADIENTS number size
size % border-image-source: none url( img.png )
URI

LINEAR GRADIENTS
repeating-linear-*
background-image: border-image-slice: 100% top right bottom left ll
linear-gradient( direction color1 start , color2 start , ... ) border-image-width: 1 top right bottom left
RADIAL GRADIENTS border-image-outset: 0 top right bottom left
repeating-radial-*
background-image: border-image-repeat: stretch repeat round space
radial-gradient( shape rsize at pos color1 start , color2 ... ) border-image: source slice /width outset repeat
GRADIENT OPTIONS DIRECTION
REPEAT-STYLE PARAMETERS
shape rsize to top
to top to top repeat space round no-repeat
circle radius at pos ... left 360deg right B Backgrounds
EXAMPLE repeat no-repeat (or repeat-x)
ellipse rh rv at pos ... 325deg 35deg LEVEL 2

EXAMPLE (ellipse 55px 45px at top, red, blue) to to background-color: transparent color
270deg 90deg
left right background-image: none url( image.png ) , url( image.jpg ) , ...
URI

RADIUS SIZE (RSIZE) ALSO ACCEPT...

215deg 145deg background-repeat: repeat repeat-x repeat-y repeat-style
closest-side farthest-side to to
closest-corner farthest-corner bottom
180deg
bottom repeat repeat repeat-style-h repeat-style-v
IMAGES AND OBJECTS left to bottom right background-attachment: scroll xed local
SIZING background-position: pos-x pos-y
object-t: ll contain cover none scale-down background: color image repeat attachment position
object-position: 50% 50% background-position LEVEL 3

IMAGE PROCESSING background-clip: border-box padding-box content-box

image-orientation: 0deg size background-origin: border-box padding-box content-box
image-resolution: 1dppx from-image resolution snap background-size: auto width height contain cover
image-rendering: auto crisp-edges pixelated background: color pos size repeat origin clip attach image
EFFECTS: SHADOWS

box-shadow: none pos-x pos-y blur size color inset

 CSS3 WEB DESIGN CHEAT SHEET EFFECTS, MASKS, SHAPES, LISTS & UI
Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

F CSS Filters FILTER VALUES

C Compositing
FILTER PROPERTY COMPOSITING AND BLENDING
number 0.0 ... 1.0
lter: none lter1 lter2 ... % 0% ... 100%
background-blend-mode: normal blend
FILTERS isolation: auto isolate
blur( blur ) 0px = original >0px=blur mix-blend-mode: normal blend
BLEND MODES
brightness( number % ) 0%=black 100%=original >100% ALLOWED
SEPARABLE
contrast( number % ) 0%=grey 100%=original >100% ALLOWED
normal multiply screen overlay
saturate( number % ) 0%=B&W 100%=original >100% ALLOWED
darken lighten color-dodge color-burn
grayscale( number % ) 0%=original 100%=B&W 0
hard-light soft-light difference exclusion
invert( number % ) 0%=original 100%=invert
NON-SEPARABLE
sepia( number % ) 0%=original 100%=sepia 270 deg 90
hue saturation color luminosity
opacity( number % ) 0%=transparent 100%=original 180
hue-rotate( angle ) 0deg=original 360deg=max
L Lists
drop-shadow( pos-x pos-y blur color ) (same as text-shadow) LISTS

list-style-image: none url( img.jpg )

URI
REFERENCE BOX

geometry-box = shape-box ll-box stroke-box view-box list-style-position: inside outside

list-style-type: disc circle square upper-alpha lower-alpha

A, a
shape-box = box margin-box
upper-roman lower-roman decimal decimal-leading-zero
OTH III, iii

1, 01
box = content-box padding-box border-box
lower-greek armenian georgian none
S CSS Shapes list-style: type position image
FLOAT AREA SHAPE GENERATED CONTENT
shape-outside: none url( img.png )
URI

content: normal none url( img.jpg ) attr( attr ) ' string '

STR
ATT
URI
basic-shape geometry-box open-quote close-quote no-open-quote no-close-quote
shape-image-threshold: 0.0 number counter( name , list-style-type )
CNT

PSEUDOCLASSES
shape-margin: 0 size % content-increment: none name
BASIC SHAPES
::before before element
content-reset: none name ::after after element
RECTANGLE
quotes: ' open-str ' ' close-str ' none EXAMPLE p::before { content: "-"; }
inset( top right bottom left round border-radius ) MARKERS
CIRCLE/ELLIPSE
::marker item's marker generated by list item (bullet, number...)
circle( shape-radius at position
) ) marker-side: list-item list-container
ellipse( radius_x radius_y at position
) )
U User Interface
POLYGON
SHAPE RADIUS BOX MODEL
polygon( x0 y0 , ... , xi yi )
size % farthest-side closest-side box-sizing: content-box border-box
M CSS Masks OUTLINE

CLIPPING SHAPE outline-width: size thin medium thick

clip-path: none url( img.png ) basic-shape geometry-box outline-style: none auto hidden dotted dashed solid
URI

POSITIONED MASKS double groove ridge inset outset

mask-image: none url( img.svg#mask ) gradient outline-color: invert color
URI

mask-mode: auto alpha luminance outline-offset: 0 size

mask-repeat: no-repeat background-repeat outline: color style width
mask-position: center background-position RESIZE/OVERFLOW

mask-clip: border-box no-clip geometry-box resize: none both horizontal vertical

mask-origin: border-box geometry-box text-overow: clip ellipsis string
mask-size: auto background-size POINTING DEVICES AND KEYBOARDS

mask-composite: add subtract intersect exclude cursor: auto default none url( img.png ) x y
URI

mask: image mode position / size repeat clip composite context-menu help pointer progress wait
BORDER-BOX MASK cell crosshair text vertical-text zoom-in zoom-out
mask-border-source: none url( img.svg#mask ) alias copy move no-drop not-allowed grab grabbing
URI

mask-border-mode: alpha luminance n-resize ne-resize e-resize se-resize s-resize sw-resize

mask-border-slice: 0 border-image-slice w-resize nw-resize ew-resize ns-resize nesw-resize
mask-border-width: auto border-image-width nwse-resize col-resize row-resize all-scroll
mask-border-outset: 0 border-image-outset caret-color: auto color
mask-border-repeat: stretch border-image-repeat nav-up: auto id current root target
mask-border: source slice / width / outset repeat mode nav-down: auto id current root target
nav-left: auto id current root target
nav-right: auto id current root target
 CSS3 WEB DESIGN CHEAT SHEET TRANSITIONS, ANIMATIONS, TRANSFORMS, MOTIONS, SNAP & COLUMNS
Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

T CSS Transitions T CSS Transforms

TRANSITIONS TRANSFORM PROPERTY

transition-property: all none property1 , property2 , ... transform: none transform1 transform2 ...
transition-duration: 0s time 2D TRANSFORMS

transition-timing-function: ease timing-function transform: translateX( size % ) Y

transition-delay: 0s time transform: translateY( size % )
transition: property duration t-function delay transform: translate( size % , size % )
transform: scaleX( number )
timing-function cubic-bezier() timing-function steps()
transform: scaleY( number )
s f s ease (0.25, 0.1, 0.25, 1) step-start (1, start)
n n n linear (0.00, 0.0, 1.00, 1) step-end (1, end) transform: scale( number , number )
s n n ease-in (0.42, 0.0, 1.00, 1) steps(n) (n, end) transform: skewX( angle ) X
transform: skewY( angle ) Z
n n s ease-out (0.00, 0.0, 0.58, 1) steps(a,b) (a, b)
s n s ease-in-out (0.42, 0.0, 0.58, 1) transform: skew( angle , angle )
SLOW NORMAL FAST transform: rotate( angle )
A CSS Animations
ANIMATIONS
transform: matrix( n1, n2 , n3 , n4 , n5 , n6 )
3D TRANSFORMS
animation-name: none name1 , name2 , ...
animation-duration: 0s time transform: translateZ( size )
animation-timing-function: ease timing-function transform: translate3d( size % , size % , size )
animation-delay: 0s time transform: scaleZ( number )
animation-iteration-count: 1 number innite transform: scale3d( number , number , number )
animation-direction: normal reverse transform: rotateX( angle )
alternate alternate-reverse transform: rotateY( angle )
animation-ll-mode: none forwards backwards both transform: rotateZ( angle )
animation-play-state: running paused
transform: rotate3d( number , number , number , angle )
animation: name duration t-function delay it-c dir f-m p-s
transform: perspective( size )
CHAINED (ANIMATION PROPERTY) ANIMATION KEYFRAMES transform: matrix3d( n1, n2 , n3 , n4 , n5 , n6 , ... , n16 )
TRANSFORMS OPTIONS
animname1 5s linear , @keyframes animname {
animname2 5s linear 5s , 0% { property: value; ... } transform-origin: 50% 50% pos-x pos-y pos-z
animname3 6s linear 10s ; ... transform-style: at preserve-3d
100% { property: value; ... } backface-visibility: visible hidden
0% = from } @-vendor-keyframes PERSPECTIVE OPTIONS
M CSS Motion Paths 100% = to
MOTION PATH perspective: none size
motion-path: none url( img.svg ) perspective-origin: 50% 50% pos-x pos-y pos-z
URI

basic-shape path geometry-box

C CSS Multi Columns
motion-offset: 0 size % COLUMNS
motion-rotation: auto reverse angle
column-width: auto size
motion: path offset rotation column-count: auto number
SCROLL SNAPPING/SNAPPORT columns: width counter
S CSS Scroll Snap SNAP MARGIN/PADDING COLUMN RULES
CAPTURING SCROLL SNAP AREAS
*-top: 0 size % column-rule-width: size thin medium thick
scroll-snap-type: none x y *-right: 0 size % column-rule-style: style none
block inline both mandatory proximity *-bottom: 0 size % column-rule-color: color
ALIGNMENT AND LIMITS *-left: 0 size % column-rule: width style color
scroll-snap-align: inline-axis block-axis *: top right bottom left COLUMN BREAKS
scroll-snap-stop: normal always INLINE/BLOCK break-before/break-after: auto always avoid left right
SCROLL SNAPPING/SNAPPORT
*-inline-start: 0 size % page column avoid-page avoid-column
scroll-padding*: *-inline-end: 0 size % break-inside: auto avoid avoid-page avoid-column
scroll-snap-margin*:
*-inline: start end SPANNING, FILLING AND GAPS
AXIS
*-block-start: 0 size % column-span: none all
none start center end
EXAMPLE scroll-snap-align: start end
*-block-end: 0 size % column-ll: auto balance
column-gap: size normal
*-block: start end
 CSS3 WEB DESIGN CHEAT SHEET FLEXBOX, POSITIONING, ALIGNMENT & GRID
Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

F CSS Flexbox P Positioning

CONTAINER PROPERTIES POSITIONING
ORDERING AND ORIENTATION
position: static relative absolute xed sticky
ex-direction: row row-reverse column column-reverse POSITIONING (NOT STATIC POSITION)
ex-wrap: nowrap wrap wrap-reverse
FLOATING

oat: none left right top: auto size %

ex-ow: direction wrap left: auto size %
clear: none left right both
PRIMARY AXIS
right: auto size %
justify-content: ex-start center ex-end bottom: auto size %
space-between space-around
SPC

15 5 z-index: auto number

SECONDARY AXIS G CSS Grids -5
align-items: ex-start center ex-end baseline stretch CONTAINER GRIDS
EXPLICIT GRID
MULTI-LINE CONTAINER PROPERTIES
grid-template-columns: none track1 track2 ...
align-content: ex-start center ex-end stretch
grid-template-rows: none track1 track2 ...
space-between space-around
SPC

TRACKS
ITEM PROPERTIES
auto size % fr automatic size or specic size/fraction unit

FLEXIBILITY

ex-grow: 0 number [ linename ] auto size % fr named grid lines + specic size

ex-shrink: 0 number minmax( min , max ) min <= size range <= max

ex-basis: auto content size % repeat( number , tracks ) repeat fragments n times

repeat(auto-ll, tracks ) repeated fragments and ll space

ex: grow shrink basis

repeat(auto-t , tracks ) repeated fragments and t space

ALIGNMENT AND ORDERING

max-content min-content largest max/min content track
align-self: auto ex-start center ex-end baseline stretch

t-content( size % ) ~ min(max-content, max(auto, arg))

order: 0 number
AREA GRID
A CSS Align grid-template-areas: " area1 area2 " ... " areaY areaZ "
CONTAINER PROPERTIES
AREAS EXAMPLE
CONTENT DISTRIBUTION
area grid area name (grid-area) #grid { display:grid;

justify-content/align-content: grid-template-areas: " head head"

. empty grid area cell

normal baseline-position "nav main"

none no grid areas are dened

space-between space-around space-evenly stretch "foot foot"; }

overow-pos self-position SHORTHAND TEMPLATE GRID

OVERFLOW POSITION
grid-template: none

SELF-POSITION
safe unsafe template-rows / template-columns
start center end (self, content)

ex-start ex-end idem (only ex) template-areas + template-rows/columns

IMPLICIT GRID
self-start self-end (self)

left right (self, content) fallback: start grid-auto-columns: auto size %

BASELINE-POSITION grid-auto-rows: auto size %

baseline last-baseline grid-auto-ow: row column dense

PRIMARY AXIS GUTTERS (GAPS)

justify-items: auto normal stretch baseline-position grid-column-gap: 0 size %

overow-pos self-position grid-row-gap: 0 size %

legacy left center right grid-gap: row-gap column-gap

SECONDARY AXIS SHORTHAND GRID

align-items: normal stretch baseline-position grid: template

overow-pos self-position template-rows / auto-ow dense grid-auto-columns

auto-ow dense grid-auto-rows / template-columns

ITEM PROPERTIES
PRIMARY AXIS ITEM GRIDS
justify-self: auto normal stretch baseline-position LINE-BASED PLACEMENT

overow-pos self-position grid-column-start/grid-column-end: auto line

SECONDARY AXIS grid-row-start/grid-row-end: auto line

align-self: auto normal stretch baseline-position grid-column: column-start column-end
overow-pos self-position grid-row: row-start row-end

LINES
TABLES
number name refer to a numbered or named grid line

border-collapse: separate collapse caption-side: top bottom

span number name span across until grid line

border-spacing: size-h size-v empty-cells: show hide

table-layout: auto xed
PLACEMENT SHORTHANDS

grid-area: template-area

row-start / column-start / row-end / column-end