CSS grid-template-columns Property
CSS grid-template-columns Property
CSS grid-template-columns
property specifies the width and the number of columns in the grid layout.
Note: The values are a space-separated list, where each value specifies the width of the respective column.
Example
Syntax
Using CSS
Using Javascript
Animatable
Yes, width property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS width property is auto.
Property Value
The following table provides a list of values for CSS grid-template-columns
property.
Value | Explanation |
---|---|
none | Any columns will be implicitly generated and their size will be determined by the grid-auto-columns property. |
length | Allows you to define the size of each column in the grid in any CSS length unit. |
% | Allows you to define the size of each column the grid in percentage. |
max-content | Sets the size of each column to depend on the largest item in the column. |
min-content | Sets the size of each column to depend on the largest item in the column. |
auto | The size of the columns is determined by the size of the content of the items in the column and by the size of the container also. |
Using JavaScript
In the following example, we will demonstrate how to change the CSS grid-template-columns
property of an element using JavaScript.
Example
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.