The grid-auto-flow property controls how auto-placed items are flowed into the grid. This property has the following values: row, column, dense, row-dense, column-dense. If neither “row” nor “column” value is provided, “row” is supposed. The grid-auto-flow property can have either a single keyword (dense, column, or row) or two keywords (column-dense or row-dense). Initial Value row Applies to Grid containers.…

The grid-auto-columns property specifies the size for the columns in a grid container. Initial Value auto Applies to Grid containers. Inherited No. Animatable Yes. Size of the columns are animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridAutoColumns = “100px”; Syntax Example of the grid-auto-columns: Result In the following example, the grid-auto-columns property is used to set a…

The grid-area property is used to specify the size and the location of the grid item within the grid row. It is a shorthand property for the following properties: The grid-area property also specifies a name to a grid item. Then, named grid items can be referenced to by the grid-template-areas property of the grid container. Initial Value auto / auto…

The grid property is a shorthand property for the following properties: The explicit grid properties (grid-template-rows, grid-template-areas, grid-template-columns) or implicit grid properties (grid-auto-rows, grid-auto-columns, grid-auto-flow) can be specified only in one grid declaration. Non-specified sub-properties are set to their initial value. Initial Value none none none auto auto row Applies to Grid containers. Inherited No. Animatable Yes.…

The font-weight property is used to set the boldness and thickness of the font. But there are some fonts that do not set all weights. They are only available on normal or bold. Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than 400 and 700. Initial Value normal Applies to All elements. It also…

The font-variant-numeric property supports the OpenType font format taking control of the usage of alternate glyphs for numbers, fractions, and ordinal markers. Numbers can have variants such as ordinals (e.g. 1st), fractions (e.g. 1/2). Unlike letters, they don’t change the content’s meaning but these variations add additional context and can have an effect on legibility. The main…

The font-variant-ligatures property controls the ligatures and contextual forms that produce more harmonized forms. This property is specified by the following values: Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version CSS3 DOM Syntax object.style.fontVariantLigatures = “normal”; Syntax Example of the font-variant-ligatures property: Result Types of ligatures There are multiple…

The font-variant-east-asian property controls the usage of alternate glyphs for East Asian scripts. In particular, it is used to control glyph substitution and sizing in East Asian texts. This property is one of the CSS3 properties. Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version CSS3 DOM Syntax object.style.fontVariantEastAsian = “ruby”; Syntax…

In CSS1 and CSS2, it was the font-variant property that specified small caps. But in CSS3, this property has become shorthand for CSS3 properties like font-variant-caps property. This property allows to select alternate glyphs for small, petite capitals and titling including many useful values like: When a given font involves capital letter glyphs that are of different…

The font-variant-alternates property takes control over the selection of alternate glyphs. The names of alternate glyph functions (styleset, stylistic, character-variant, ornament, swash, annotation) can be defined in @font-feature-values. The human-readable names specified in @font-feature-values are allowed in the stylesheet. Initial Value normal Applies to All elements. It also applies to ::first-letter and ::first-line. Inherited Yes. Animatable No. Version CSS3 DOM Syntax object.style.fontVariantAlternates…