CSS - grid-auto-columns Property

Quiz

CSS grid-auto-columns property defines the width of grid columns that are created implicitly. If a grid item is placed in a column that isn't explicitly dimensioned by grid-template-columns, the grid system creates implicit grid columns to accommodate it. The property has no effect if grid-template-columns is used.

Syntax

grid-auto-columns: auto | length | percentage | max-content | min-content | minmax(min,max) | fit-content();

Property Values

Value	Description
auto	The size of the columns depends on the size of the container. Default.
length	The size of the column is set using length units.
percentage	The size of the column is set using percentage values.
max-content	The size of the column depends on the length of the content. Wrapping do not occur.
min-content	The size of the column depends on the length of the content. Wrapping occurs.
minmax(min, max)	It specifies the minimum default column size and the maximum attainable column size.
fit-content()	It specifies a size within which the content is to be shown. Wrapping can occur.

Examples of CSS Grid Auto Columns Property

The following examples explain the grid-auto-columns property with different values.

Grid Auto Columns Property with Auto Value

To allow the grid item to size itself based on its content and the available space in the grid container, we use the auto value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: auto;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with Length Values

To set the size of implicit columns, we can specify the size in length units (e.g. 10px, 20em etc.). All the implicitely created columns will thus be having the specified size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 140px;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 140px
      (each column is 140px)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with Percentage Values

To set the size of implicit columns, we can specify the size in percentage values (e.g. 10%, 20% etc.) which assign size as percent of the size of the container. All the implicitely created columns will thus be having the specified size. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: 23%;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: 15% (each column is 
      15% of the width of the container)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         Item-1
      </div>
      <div class="grid-item item2">
         Item-2
      </div>
      <div class="grid-item item3">
         Item-3
      </div>
      <div class="grid-item item4">
         Item-4
      </div>
      <div class="grid-item item5">
         Item-5
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with Max Content Value

To make the implicitly created columns as wide as the largest piece of content within the columns, we use the max-content value. Each column will expand to fit its content without wrapping or clipping, making the columns as wide as the largest content item. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: max-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: max-content (the items are sized 
      such that they accomodate all the content without
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with Min Content Value

To make the implicitly created columns as narrow as the smallest piece of content within them, while still ensuring that all content is fully visible, we use the min-content value. This allows the columns to shrink to fit the smallest content size causing wrapping. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: min-content;
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: min-content (the items are sized
      such that they accomodate all the content with
      overflow or wrapping)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is first Item1
      </div>
      <div class="grid-item item2">
         Second Item
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with MinMax Function

To define a size range for the grid items, we use the minmax() function to specify the default minimum size of the item and the maximum attainable size of the item (e.g. minmax(50px,100px) indicates the initial size is 50px but the element can grow upto 100px). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: minmax(100px, 150px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: minmax(100px, 150px) 
      (the items will have an initial size of
      100px but cant grow upto 150px depending
      on the content.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

Grid Auto Columns Property with Fit Content Function

To assign sizes to implicitly created columns based on their content not exceeding a specified maximum value, we use the fit-content() function. An element can at maximum have the size specified to the function, if the content is longer than the specified size then wrapping occurs. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         background-color: lightgray;
         padding: 10px;
         display: grid;
         grid-auto-columns: fit-content(120px);
         gap: 10px;
      }

      .grid-item {
         background-color: #336699;
         border: 3px solid blue;
         padding: 10px;
         text-align: center;
         color: white;
      }

      .item1 {
         grid-area: 1 / 1 / 2 / 2;
      }

      .item2 {
         grid-area: 1 / 2 / 2 / 3;
      }

      .item3 {
         grid-area: 1 / 3 / 2 / 4;
      }

      .item4 {
         grid-area: 2 / 1 / 3 / 2;
      }

      .item5 {
         grid-area: 2 / 2 / 3 / 3;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-auto-columns property
   </h2>
   <h4>
      grid-auto-columns: fit-content(120px)
      (the items will have a max width of 120px
      and will not exceed this value but ensure
      the content is completely displayed.)
   </h4>
   <div class="grid-container">
      <div class="grid-item item1">
         This is the first Item1.
      </div>
      <div class="grid-item item2">
         This is Second Item.
      </div>
      <div class="grid-item item3">
         3rd
      </div>
      <div class="grid-item item4">
         fourth
      </div>
      <div class="grid-item item5">
         5th
      </div>

   </div>
</body>

</html>

Supported Browsers

Property
grid-auto-columns	57	16	52	10	44

css_reference.htm

Print Page