CSS grid-columns Property
Browser Support
Currently, no browsers support grid-columns.
Definition and Usage
The grid-columns attribute defines the width of each column in the grid.
Tip:The grid system is of great value to print designers. Now the same changes are applied to online content. The grid properties provide the ability to adjust the size and position of titles, text, and images in a scalable grid.
Example
Add a grid row in the middle of the div element, add another at 200 pixels from the right, and add one in the middle of the remaining space:
div
{
grid-columns:50% * * 200px;
}
CSS Syntax
grid-columns: length|%|none|inherit;
Attribute Value
| Value | Description |
|---|---|
| length | Refer to the grid of the containing block. |
| % | Refer to the width of the containing block. |
| none | |
| inherit |
Technical Details
| Default Value: | none |
|---|---|
| Inheritance: | no |
| Version: | CSS3 |
| JavaScript Syntax: | object.style.gridColumns="50% * * 200px" |
