CSS grid-auto-columns

The CSS grid-auto-columns property is used to set the default size (width) for all columns in grid layout. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-columns: 80px;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / span 1 / span 3;}
      #b {grid-area: 3 / 1 / 2 / span 2;}
      #d {grid-area: 3 / 1 / 4 / 2;}
      #j {grid-area: 5 / 1 / 6 / span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">E</div>
      <div id="f">F</div>
      <div id="g">G</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G
H
I
J

See the output, the default size of all columns are 80px. But we can change any particular column's size using the grid-area property.

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns.

Note - The grid-area property is used to define the location and size of a grid item.

CSS grid-auto-columns Syntax

The syntax of grid-auto-columns property in CSS, is:

grid-auto-columns: x;

The value of x should be any of the following:

CSS grid-auto-columns: fit-content(length) Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-columns: fit-content(80px);}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / span 1 / span 3;}
      #b {grid-area: 3 / 1 / 2 / span 2;}
      #d {grid-area: 3 / 1 / 4 / 2;}
      #j {grid-area: 5 / 1 / 6 / span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">Spain</div>
      <div id="f">F</div>
      <div id="g">Germany</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
Spain
F
Germany
H
I
J

CSS grid-auto-columns: fit-content() Example

Note - If you remove the 80px from the fit-content(), then the grid items covers the whole grid container. That is, replace the following CSS code, from above program:

grid-auto-columns: fit-content(80px);

with the CSS code given below:

grid-auto-columns: fit-content();

Now the output will be:

A
B
C
D
Spain
F
Germany
H
I
J

CSS grid-auto-columns: min-content Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-columns: min-content;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / span 1 / span 3;}
      #b {grid-area: 3 / 1 / 2 / span 2;}
      #d {grid-area: 3 / 1 / 4 / 2;}
      #j {grid-area: 5 / 1 / 6 / span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">Spain</div>
      <div id="f">F</div>
      <div id="g">I'm from Germany</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
Spain
F
I'm from Germany
H
I
J

CSS grid-auto-columns: max-content Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-columns: max-content;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / span 1 / span 3;}
      #b {grid-area: 3 / 1 / 2 / span 2;}
      #d {grid-area: 3 / 1 / 4 / 2;}
      #j {grid-area: 5 / 1 / 6 / span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">Spain</div>
      <div id="f">F</div>
      <div id="g">I'm from Germany</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
Spain
F
I'm from Germany
H
I
J

CSS grid-auto-columns: minmax(min.max) Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-auto-columns: minmax(min.max);}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-area: 1 / 1 / span 1 / span 3;}
      #b {grid-area: 3 / 1 / 2 / span 2;}
      #d {grid-area: 3 / 1 / 4 / 2;}
      #j {grid-area: 5 / 1 / 6 / span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">Spain</div>
      <div id="f">F</div>
      <div id="g">I'm from Germany</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
Spain
F
I'm from Germany
H
I
J

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!