My Blog

The hanging-punctuation property specifies whether a punctuation mark should hang at the start or at the end of a text’s line. Hanging punctuation is used with fully-justified text and controls over the alignment of all the lines in a paragraph of text when used at the end of the lines. Initial Value none Applies to All elements.…

The grid-template-rows property defines the number and size of the rows in a grid layout. The values of the grid-template-row property are separated by space. Each of the values specifies the row height. Initial Value none Applies to Grid containers. Inherited No. Animatable Yes. The size of the rows is animatable. Version CSS Grid Layout Module Level 1 DOM…

The grid-template-columns property defines the size (width) of each column in the grid layout: Initial Value none Applies to Grid containers. Inherited No. Animatable Yes. Columns are animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridTemplateColumns = “40px 40px 40px”; Syntax Example of the grid-template-column property: Result Example of the grid-template-column applied to grid-container:

The grid-template-areas property is used to refer to the name when setting up the grid layout. You can name grid items with the grid-area property. Each area is defined by apostrophes. These areas may be referenced from such grid-placement properties as grid-row-start, grid-row-end, grid-column-end, grid-column-start, as well as their shorthand properties, like grid-row, grid-area, and grid-column. Initial Value auto Applies to Grid containers. Inherited No.…

The grid-template property defines the grid columns, rows and areas. It is a shorthand property for the following properties: The grid-template property sets the rows and columns, separated by a forward slash. The CSS grid shorthand property resets grid properties to their first values. If you don’t want these values cascade in separately, instead of the grid-template property use the grid…

The CSS grid-row-start property defines the start of the item inside of the grid row, adding a span, a line or nothing to its grid location and specifies the inline-start side of the grid are of the item. This property is a part of the grid-row shorthand property. Initial Value auto Applies to Grid items. Inherited No. Animatable Yes.…

The grid-row-gap property sets the gap size between the rows of grid elements. The gap width can be specified, separating the rows by using a value for grid-row-gap. It can be specified both in “px” and percentages. Initial Value 0 Applies to Multi-column elements, flex containers, grid containers. Inherited No. Animatable Yes. Gap between the rows is animatable.…

The grid-row-end property is used to specify on which row to stop displaying the item or how many rows the item will span. The width and height of the items in the container should not be initialized directly. When they are initialized, we can’t see the span effect. Initial Value auto Applies to Grid items. Inherited No.…

The grid-row property is used to specify on which row-line to start the item, and which row-line to end. 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.gridRow = “1 / span 2”;…

The grid-gap property is used to specify the size of the gap between the rows, and between the columns. This property is a shorthand for the following properties: Gap replaces the grid-gap prefixed property. But this prefixed property will be needed for browsers that implemented grid-gap instead of the gap. Initial Value normal normal Applies to Grid containers. Inherited No. Animatable…