Antenna House Formatter V7.4

CSS Grid

Antenna House Formatter V7.4 implements a subset of [CSS3-Grid] CSS Grid Layout Module Level 2.

Grid definition

CSS (-ah-)grid-template-rows no-LT
CSS (-ah-)grid-template-columns no-LT

Specifies the track list of the grid rows or columns. [CSS3-Grid] Explicit Track Sizing: the ‘grid-template-rows’ and ‘grid-template-columns’ properties V7.4 no-LT

Value:none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
Initial:none
Applies to:grid containers
Inherited:no
Percentages:refer to the corresponding dimension of the content area

Values have the following meanings:

none
No explicit tracks are created by this property
<track-list>
Track list as a sequence of track sizing functions and line names
<auto-track-list>
Track list as a sequence of track sizing functions and line names that includes one repeat() with an auto-fill or auto-fit first parameter value.

Specifies the line name and track sizing functions of the grid rows or columns as a space-separated track list.

<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( <length-percentage> )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length-percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>
<line-names> = '[' <custom-ident>* ']'
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<name-repeat> = repeat( [ <integer [1,∞]> | auto-fill ], <line-names>+)

Values have the following meanings:

<custom-ident>
CSS identifier that is not span or auto.

These properties are not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-template-areas V7.4 no-LT

Specifies named grid areas. [CSS3-Grid] ‘grid-template-areas’

Value:none | <string>+
Initial:none
Applies to:grid containers
Inherited:no
Percentages:N/A

Specifies named grid areas that can be referenced from the grid item placement properties.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-template V7.4 no-LT

Shorthand property for setting properties related to the grid track list and named grid areas. [CSS3-Grid] ‘grid-template’

Value:none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
Initial:none
Applies to:grid containers
Inherited:see individual properties
Percentages:see individual properties

Values have the following meanings:

none
Sets all three properties to their initial values
<'grid-template-rows'> / <'grid-template-columns'>
Sets grid-template-rows and grid-template-columns, and sets grid-template-areas to none
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
Sets grid-template-areas to the listed strings and sets grid-template-rows to the track sizes following each string. Sets grid-template-columns to the track list after the slash, or to none if not specified.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-auto-rows no-LT
CSS (-ah-)grid-auto-columns no-LT

Specifies the size of tracks not assigned a size by grid-template-rows or grid-template-columns. [CSS3-Grid] Implicit Track Sizing: the ‘grid-auto-rows’ and ‘grid-auto-columns’ properties V7.4 no-LT

Value:<track-size>+
Initial:auto
Applies to:grid containers
Inherited:no
Percentages:refer to the corresponding dimension of the content area

These properties are not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-auto-flow V7.4 no-LT

Specifies how auto-placed grid items are flowed into the grid. [CSS3-Grid] Implicit Track Sizing: the ‘grid-auto-flow’ and ‘grid-auto-columns’ properties

Value:[ row | column ] || dense
Initial:row
Applies to:grid containers
Inherited:no
Percentages:N/A

Values have the following meanings:

row
Items are placed by filling each row in turn, adding new rows as necessary
column
Items are placed by filling each column in turn, adding new columns as necessary
dense
Specifies to use a dense placement algorithm that attempts to fill in holes earlier in the grid

These properties are not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid V7.4 no-LT

Shorthand property for setting grid related properties. [CSS3-Grid] ‘grid’

Value:<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
Initial:none
Applies to:grid containers
Inherited:see individual properties
Percentages:N/A

This property is a shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow. It does not set the gutter properties.

This property is not available with Antenna House Formatter V7.4 Lite.

Grid item placement

The following properties apply to grid items:

CSS (-ah-)grid-row-start no-LT
CSS (-ah-)grid-column-start no-LT
CSS (-ah-)grid-row-end no-LT
CSS (-ah-)grid-column-end no-LT

Specifies the row or column start or end line of a grid item. [CSS3-Grid] Line-based Placement: the ‘grid-row-start’, ‘grid-column-start’, ‘grid-row-end’, and ‘grid-column-end’ properties V7.4 no-LT

Value:<grid-line>
Initial:auto
Applies to:grid items and absolutely-positioned boxes whose containing block is a grid container
Inherited:no
Percentages:N/A
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

These properties are not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-row V7.4 no-LT

Shorthand property for setting properties related to the grid item placement in a row. [CSS3-Grid] ‘grid-row’

Value:<grid-line> [ / <grid-line> ]?
Initial:auto
Applies to:grid items
Inherited:no
Percentages:N/A

This property is a shorthand for grid-row-start/grid-row-end.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-column V7.4 no-LT

Shorthand property for setting properties related to the grid item placement in a column. [CSS3-Grid] ‘grid-column’

Value:<grid-line> [ / <grid-line> ]?
Initial:auto
Applies to:grid items
Inherited:no
Percentages:N/A

This property is a shorthand for grid-column-start and grid-column-end.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-area V7.4 no-LT

Shorthand property for setting properties related to the grid item placement. [CSS3-Grid] ‘grid-area’

Value:<grid-line> [ / <grid-line> ]{0,3}
Initial:none
Applies to:grid containers
Inherited:see individual properties
Percentages:N/A

This property is a shorthand for grid-row-start, grid-row-end, grid-column-start, and grid-column-end.

This property is not available with Antenna House Formatter V7.4 Lite.

Alignment and spacing

The following properties apply to grid items:

CSS (-ah-)place-content V7.4 no-LT

Shorthand property for setting properties related to the default alignment of items in a contianer. [CSS3-Align] Content-Distribution Shorthand: the ‘place-content’ property

Value:<align-content> <justify-content>?
Initial:normal
Applies to:grid containers
Inherited:no
Percentages:N/A

This property is a shorthand for align-content and justify-content. The first value specifies align-content, and the second specifies justify-content. If one value is provided, justify-content is set to the same value as align-content.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)justify-self V7.4 no-LT

Specifies the justification along the inline axis of the item within its container. [CSS3-Align] Inline-Axis (or Main-Axis) Alignment: the ‘justify-self’ property

Value:auto | normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ]
Initial:auto
Applies to:grid items
Inherited:no
Percentages:N/A

Values have the following meanings:

auto

Behaves as normal when determining the actual position of an absolutely positioned grid item. Otherwise, behaves as the computed justify-items value of the parent grid container.

normal

Sizes as either stetch (typical for non-replaced elements) or start (typical for replaced elements). See [CSS3-Grid] Grid Item Sizing.

stretch

When the item’s width or height (as appropriate) is auto and neither of the corresponding margins is auto, set the item’s box’s used size to the length to make its outer size as close as possible to filling the grid item’s area while still respecting min-height/min-width/max-height/max-width.

<overflow-position>? <self-position>

When the item’s width or height (as appropriate) is auto and neither of the corresponding margins is auto, set the item’s box’s used size to the length to make its outer size as close as possible to filling the grid item’s area while still respecting min-height/min-width/max-height/max-width.

<overflow-position> = safe | unsafe
safe

If the item overflows its grid lines, the item is aligned as if the alignment is start.

unsafe

The alignment is honored even if the item overflows.

<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
center

Align the item in the center.

start
end

Align the item to the start or end side of the container.

self-start
self-end

Align the item using the start or end side of the item.

flex-start
flex-end

Do not apply to grid items, so treated as start or end.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)place-self V7.4 no-LT

Specifies self-alignment of items in the container. [CSS3-Align] Self-Distribution Shorthand: the ‘place-self’ property

Value:<align-self> <justify-self>?
Initial:normal
Applies to:grid items
Inherited:no
Percentages:N/A

This property is a shorthand for align-self and justify-self. The first value specifies align-self, and the second specifies justify-self. If one value is provided, justify-self is set to the same value as align-self.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)justify-items V7.4 no-LT

Specifies the default justify-self value for all of the child boxes in the container. [CSS3-Align] Inline-Axis (or Main-Axis) Alignment: the ‘justify-items’ property

Value:normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | legacy | legacy && [ left | right | center ]
Initial:legacy
Applies to:grid containers
Inherited:no
Percentages:N/A

Values have the following meanings:

legacy

Causes the value to effectively inherit into descendants.

Other values correspond to justify-self values.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)place-items V7.4 no-LT

Shorthand property for setting properties related to alignment of items in the grid container. [CSS3-Align] Self-Alignment Shorthand: the ‘place-items’ property

Value:<‘align-items’> <‘justify-items’>?
Initial:normal
Applies to:grid items
Inherited:no
Percentages:N/A

This property is a shorthand for align-items and justify-items. The first value specifies align-items, and the second specifies justify-items. If one value is provided, justify-items is set to the same value as align-items.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)row-gap V7.4 no-LT

Specifies the gutter between items in the container. [CSS3-Align] Row and Column Gutters: the ‘row-gap’ and ‘column-gap’ properties

Value:normal | <length> | <percentage>
Initial:normal
Applies to:grid containers
Inherited:no
Percentages:refer to corresponding size of the content box of the element

Values have the following meanings:

normal

0px.

<length> | <percentage>

Specifies the gap between rows.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)gap V7.4 no-LT

Shorthand property for setting properties related to the row and column gaps between items in the container. [CSS3-Align] Gap Shorthand: the ‘gap’ property

Value:[normal | <length> | <percentage>]{1,2}
Initial:normal
Applies to:grid containers
Inherited:no
Percentages:refer to corresponding size of the content box of the element

This property is a shorthand for row-gap and column-gap. The first value specifies row-gap, and the second specifies column-gap. If one value is provided, column-gap is set to the same value as row-gap.

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-row-gap V7.4 no-LT

Legacy shorthand property for row-gap. [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties

Value:normal | <length> | <percentage>
Initial:normal
Applies to:grid containers
Inherited:no
Percentages:refer to corresponding size of the content box of the element

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-column-gap V7.4 no-LT

Legacy shorthand property for column-gap. [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties

Value:normal | <length> | <percentage>
Initial:normal
Applies to:grid containers
Inherited:no
Percentages:refer to corresponding size of the content box of the element

This property is not available with Antenna House Formatter V7.4 Lite.

CSS (-ah-)grid-gap V7.4 no-LT

Legacy shorthand property for gap. [CSS3-Align] Legacy Gap Properties: the ‘grid-row-gap’, ‘grid-column-gap’, and ‘grid-gap’ properties

Value:[normal | <length> | <percentage>]{1,2}
Initial:see individual properties
Applies to:grid containers
Inherited:no
Percentages:refer to corresponding size of the content box of the element

This property is not available with Antenna House Formatter V7.4 Lite.

Restrictions

The CSS Grid implementation does not support:

  • Subgrids
  • Absolutely positioned grid items
  • Fragmented grids or grid items
  • Baseline alignment