My Blog

The grid-column-start property specifies the start position of the item within the column by adding a line, a span, or nothing. In other words, it defines the block-start position of its grid area. Initial Value auto Applies to Grid items. Inherited No. Animatable Yes. The starting point is animatable. Version CSS Grid Layout Module Level 1 DOM…

The grid-column-gap property sets the size of the gap between the columns. Length can be specified both by pixels and percentages. Initial Value 0 Applies to Multi-column elements, flex containers, grid containers. Inherited No. Animatable Yes. Gap is animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridColumnGap = “30px”; Syntax Example of the grid-column-gap property: Result Example of the…

The grid-column-end property specifies how many columns the grid item will span and on which column to stop displaying the item, thus defining the block-end position of its grid area. Initial Value auto Applies to Grid items. Inherited No. Animatable Yes. The number of columns are animatable. Version CSS Grid Layout Module Level 1 DOM Syntax object.style.gridColumnEnd…

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…