The implicity-created columns have an auto size.

Here we combine grid-template-areas: "header header header" "sidebar main main" with grid-template-columns: 50px 200px.

In this situation, the grid-template-areas defines 3 columns, while the grid-template-columns only defines 2 column widths.

As a result, the third column width takes its value from the grid-auto-columns property: 100px.

Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it on its own row.

Here we have grid-template-areas: "header header header" "sidebar main main" "footer footer footer", plus an additional "Other" grid item. The algorithm places it in its own column.

The implicity-created rows have an auto size.

Here we combine grid-template-areas: "header header header" "sidebar main main" "footer footer footer" with grid-template-rows: 50px 200px.

In this situation, the grid-template-areas defines 3 rows, while the grid-template-rows only defines 2 row heights.

As a result, the third row height (the footer) takes its value from the grid-auto-rows property: 100px.

In this 3-column setup, the grid item is automatically placed.

The target grid item ends just before the second column.

The target grid item ends just before the first column, which automatically creates a fourth column.

Removes the gap.

You can use pixel values.

You can use (r)em values.

You can use percentage values.

In this 3-column setup, the grid item is automatically placed.

The target grid item is placed on the second column.

The target grid item is placed outside the grid, in an auto-generated fourth column.

In this 3-column setup, the grid item is automatically placed.

The target grid item ends just before the third row.

The target grid item ends just before the fourth row, which automatically creates a third row.

Removes the gap.

You can use pixel values.

You can use (r)em values.

In this 3-column setup, the grid item is automatically placed on the first row.

The target grid item is placed on the second row.

The target grid item is placed outside the grid, in an auto-generated third row.

No area is defined.

You can use area names to specify which cells each grid item should occupy.

No columns are defined, so you only have one.

You can use the keyword auto so that each column resizes itself automatically.

You can mix the units.

You can use the fr flex unit to distribute the remaining space across all flex columns.

No rows are defined.

You can mix the units.

You can use the fr flex unit to distribute the remaining space across all flex rows.

Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

• The first line is 100px high
• The second line is 50px high
• The remaing space is 150px

This remaining space is distributed equally amongst the two lines:

• The first line is now 175px high
• The second line is now 125px high

Each line will only fill the space it needs. They will all move towards the start of the flexbox container's cross axis.

Each line will only fill the space it needs. They will all move towards the end of the flexbox container's cross axis.

Each line will only fill the space it needs. They will all move towards the center of the flexbox container's cross axis.

Each line will only fill the space it needs. The remaining space will appear between the lines.

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

The flexbox items are aligned at the start of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

The flexbox items are aligned at the end of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.

The flexbox items are aligned at the center of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

The flexbox items are aligned at the baseline of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

The flexbox items will stretch across the whole cross axis.

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

The target will use the value of align-items.

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

The element will be automatically sized based on its content, or on any height or width value if they are defined.

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

The flexbox items are ordered the same way as the text direction, along the main axis.

The flexbox items are ordered the opposite way as the text direction, along the main axis.

The flexbox items are ordered the same way as the text direction, along the cross axis.

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

The element will not grow if there's space available. It will only use the space it needs.

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the remaining space is divided in 3:

• 1 third goes to the green item
• 2 thirds go to the pink item
• Nothing goes to the yellow item, who retains its initial width

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

• 3 quarters are taken from the red item
• 1 quarter is taken from the yellow item

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

The flexbox items will be distributed among multiple lines if needed.

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

The flexbox items are pushed towards the start of the container's main axis.

The flexbox items are pushed towards the end of the container's main axis.

The flexbox items are centered along the container's main axis.

The remaining space is distributed between the flexbox items.

The remaining space is distributed around the flexbox items: this adds space before the first item and after the last one.

The order of the flexbox items is the one defined in the HTML code.

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

You can use negative values.

You can set a different value for each flexbox item.

Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

• The first line is 100px high
• The second line is 50px high
• The remaing space is 150px

This remaining space is distributed equally amongst the two lines:

• The first line is now 175px high
• The second line is now 125px high

Each line will only fill the space it needs. They will all move towards the start of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. They will all move towards the end of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. They will all move towards the center of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. The remaining space will appear between the lines.

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

The flexbox items are aligned at the start of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

The flexbox items are aligned at the end of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.

The flexbox items are aligned at the center of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

The flexbox items are aligned at the baseline of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

The flexbox items will stretch across the whole cross axis.

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

The target will use the value of align-items.

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

The element will be automatically sized based on its content, or on any height or width value if they are defined.

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

The flexbox items are ordered the same way as the text direction, along the main axis.

The flexbox items are ordered the opposite way as the text direction, along the main axis.

The flexbox items are ordered the same way as the text direction, along the cross axis.

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

The element will not grow if there's space available. It will only use the space it needs.

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the remaining space is divided in 3:

• 1 third goes to the green item
• 2 thirds go to the pink item
• Nothing goes to the yellow item, who retains its initial width

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

• 3 quarters are taken from the red item
• 1 quarter is taken from the yellow item

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

The flexbox items will be distributed among multiple lines if needed.

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

The flexbox/grid items are pushed towards the start of the container's main axis.

The flexbox/grid items are pushed towards the end of the container's main axis.

The flexbox/grid items are centered along the container's main axis.

The remaining space is distributed between the flexbox/grid items.

The remaining space is distributed around the flexbox/grid items: this adds space before the first item and after the last one.

The order of the flexbox items is the one defined in the HTML code.

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

You can use negative values.

You can set a different value for each flexbox item.

Applies a transparent color to the text. The text will still take up the space it should.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

The browser will use a serif font family: all characters have stroke endings.

The browser will use a sans-serif font family: no character has stroke endings.

The browser will use a monospace font family: all characters have the same width.

The browser will use a cursive font family.

The browser will use a fantasy font family.

The text will use the browser's default medium size.

You can use pixel values.

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use relative keywords. The value is relative to the parent.

The following are available:

• larger
• smaller

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

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

The text is not slanted.

Use the italic version of the font: the letters are slightly slanted.

Use the oblique version of the font: the letters are more slanted than italic.

Each letter uses its normal glyph.

Each letter uses its small capitalized version.

The text is in normal weight.

The text becomes bold.

You can use numeric values. They all correspond to a particular named weight:

• 100 Thin
• 200 Extra Light
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold
• 700 Bold
• 800 Extra Bold
• 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

The text content is aligned to the left.

The text content is aligned to the right.

The text content is centered.

The text content is justified.

Removes any text decoration.

Underlines the text content.

The text is not indented.

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

You can also use negative values.

The text content is clipped and not accessible.

The overflowing content is replaced by an ellipsis: …

The text content has no shadow.

You need at least two values:

• the first is the horizontal offset
• the second is the vertical offset

The shadow color will be inherited from the text color.

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

Removes any text transformation: the text will appear the same as in the HTML code.

Turns the first letter of each word into a capital letter.

Turns all letters into capital letters.

Turns all letters into lowercase letters.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

The white space is exactly preserved.

• Sequences of spaces are preserved
• Lines break only on new lines and <br>

The white space is mostly preserved.

• Sequences of spaces are preserved
• Lines break on new lines, <br>, but also when reaching the end of the element

Only new lines are preserved.

• Sequences of spaces are combined into one
• Lines break on new lines, <br>, but also when reaching the end of the element

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

Words with no space will break as soon as they reach the end of a line.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Applies a transparent color to the text. The text will still take up the space it should.

You can use one of the 140+ color names.

You can use hexadecimal color codes.

You can use rgb() color codes:

• the first value is for red
• the second value is for green
• the third value is for blue

Each of them can have a value between 0 and 255.

You can use rgba() color codes:

• the first 3 values are for rgb
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

You can use hsl() color codes:

• the first value is for hue and can go from 0 to 359
• the second value is for saturation and go from 0% to 100%
• the third value is for luminosity and go from 0% to 100%

You can use hsl()a color codes:

• the first 3 values are for hsl
• the 4th value is for the alpha channel and defines the opacity of the color

The alpha value can go from zero 0 (transparent) to one 1 (opaque).

When using multiple values, the font-family list of font families defines the priority in which the browser should choose the font family.

The browser will look for each family on the user's computer and in any @font-face resource.

The list is prioritized from left to right: it will use the first value if it's available, or go to the next one, until the end of the list is reached. The default font family is defined by the browser preferences.

In this example, the browser will try to use Source Sans Pro if it's available. If it can't find it, it will try to use Arial. If it's not available either, it will use the browser's sans-serif font.

The browser will use a serif font family: all characters have stroke endings.

The browser will use a sans-serif font family: no character has stroke endings.

The browser will use a monospace font family: all characters have the same width.

The browser will use a cursive font family.

The browser will use a fantasy font family.

The text will use the browser's default medium size.

You can use pixel values.

You can use em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use rem values.

The value is relative to the root element's font-size, which is the <html> element.
As a result, the value will not vary depending on the depth of the element in the HTML hierarchy, and will reamin context independent.

You can use percentage values. They act like em values.

The value is relative to the parent's font-size.
As a result, the value will cascade if used on child elements.

You can use relative keywords. The value is relative to the parent.

The following are available:

• larger
• smaller

You can use absolute keywords. The value is relative to the root element <html>.

The following are available:

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

The text is not slanted.

Use the italic version of the font: the letters are slightly slanted.

Use the oblique version of the font: the letters are more slanted than italic.

Each letter uses its normal glyph.

Each letter uses its small capitalized version.

The text is in normal weight.

The text becomes bold.

You can use numeric values. They all correspond to a particular named weight:

• 100 Thin
• 200 Extra Light
• 300 Light
• 400 Normal
• 500 Medium
• 600 Semi Bold
• 700 Bold
• 800 Extra Bold
• 900 Ultra Bold

If the font family doesn't provide the requested weight, it will use the closest available one.

You can use relative keywords: lighter or bolder. The browser will use the next available weight.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.

Reverts to the default value of the browser.

You can use unitless values: the line height will be relative to the font size.

You can use pixel values.

You can use em values: like with unitless values, the line height will be relative to the font size.

The text content is aligned to the left.

The text content is aligned to the right.

The text content is centered.

The text content is justified.

Removes any text decoration.

Underlines the text content.

The text is not indented.

You can use numeric values like pixels, (r)em, percentages...

Notice how only the first line is indented.

You can also use negative values.

The text content is clipped and not accessible.

The overflowing content is replaced by an ellipsis: …

The text content has no shadow.

You need at least two values:

• the first is the horizontal offset
• the second is the vertical offset

The shadow color will be inherited from the text color.

You can define a color as the last value.

As with color, you can use color names, hexadecimal, rgb, hsl...

The optional third value defines the blur of the shadow.

The color will be diffused across 10px in this example, from opaque to transparent.

Removes any text transformation: the text will appear the same as in the HTML code.

Turns the first letter of each word into a capital letter.

Turns all letters into capital letters.

Turns all letters into lowercase letters.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is wrapped.

Sequences of spaces are combined into one.
Line breaks are ignored.
The text content is not wrapped and remains on a single line.

The white space is exactly preserved.

• Sequences of spaces are preserved
• Lines break only on new lines and <br>

The white space is mostly preserved.

• Sequences of spaces are preserved
• Lines break on new lines, <br>, but also when reaching the end of the element

Only new lines are preserved.

• Sequences of spaces are combined into one
• Lines break on new lines, <br>, but also when reaching the end of the element

Words with no space will not break. Sequences of uninterrupted characters will be displayed on a single line.

Words with no space will break as soon as they reach the end of a line.

The spacing between the characters is normal.

You can use pixel values.

You can use em values: this allows the spacing to remain relative to the font-size.