The grid-column property defines size and location of grid item in a grid layout. It is a shorthand for the following properties: Initial Value auto auto Applies to Grid items. Inherited No. Animatable Yes. Items are animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridColumn = “1/ span 3”; Syntax Example of the grid-column property:…

The grid-auto-rows property specifies the size for the rows in a grid container. It has an effect only on the rows without specified size. This property has the following values: auto, max-content, min-content, minmax, length and percentages. Initial Value auto Applies to Grid containers. Inherited No. Animatable Yes. Size of the rows are animatable. Version CSS Grid Layout Module…

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…