CSS grid-auto-columns Property
The grid-auto-columns property in CSS is known to specify the size of a grid column track which is created implicitly or the pattern of the tracks. In case a grid item is positioned into a column that is not sized explicitly by the grid-template-columns or the implicit grid tracks are created for holding it.
This may happen either by positioning into a column explicitly or by the auto-placement algorithm that creates additional columns.
Syntax
<track-size>+
where
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
where
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
where
<length-percentage> = <length> | <percentage>
Example: CSS grid-auto-columns Property
In the example below, we are using the grid-auto-columns property with different border styles, colors, and different values. In this case, we have given the grid-auto-columns property as 200px.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid-auto-columns property in CSS</title>
<style type="text/css">
#grid {
height: 100px;
display: grid;
grid-template-areas: "a a";
gap: 10px;
grid-auto-columns: 200px;
}
#grid > div {
background-color: blue;
}
</style>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
Output
Example 2: CSS grid-auto-columns Property
In the example below, we are using the grid-auto-columns property with different border styles, colors and their different values. In this case, we have given the grid-auto-columns property as min-max.
The CSS styling is done inside the opening and closing head tags of the HTML.
The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags.
<!DOCTYPE html>
<html>
<head>
<title>The grid-auto-columns property in CSS</title>
<style type="text/css">
#grid {
height: 100px;
display: grid;
grid-template-areas: "a a";
gap: 10px;
grid-auto-columns: minmax(max-content, 2fr);
}
#grid > div {
background-color: blue;
}
</style>
</head>
<body>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
57 |
57 |
| Edge |
16 |
16 |
| Firefox |
70 |
70 |
| Internet Explorer |
10 |
10 |
| Opera |
44 |
44 |
| Safari |
10.1 |
10.1 |
| Webview Android |
57 |
57 |
| Chrome Android |
57 |
57 |
| Firefox Android |
79 |
79 |
| Opera Android |
43 |
43 |
| IOS Safari |
10.3 |
10.3 |
| Samsung Internet |
6.0 |
6.0 |
Conclusion
The initial value for the grid-columns property is 'auto'. This property is applicable to grid containers. It is not an inherited property. Percentages refer to the corresponding dimensions of the content area. The computed value for this property is the percentage as specified or the absolute length.
