Jobs Hub

Menu

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:

auto - used to set the default value for grid-auto-columns property
length - used to define the custom size columns. For example: 120px
% - used to define the custom size columns using percentage. Giving 100% as value to grid-auto-columns, spans the column for the whole horizontal width of the web page
fit-content(length)|fit-content() - used when we need to utilize every pixels of space or to utilize whole horizontal spaces. For example: fit-content(80px) or fit-content()
min-content - used to set the minimum width depending on the content of the column. The width of biggest word from all columns, gets utilized and set as the default width for all the columns
max-content - used to set the maximum possible width that a content of a column can take. This refers to the width of the column in which all the words gets arranged in one line, if possible
minmax(min.max) - used to define the size range for the column. The range is, the size greater than or equal to the min-content value to less than or equal to the max-content value

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 »