CSS grid - grid-auto-columns Property

The CSS property grid-auto-columns defines the width of grid columns that are created implicitly or in a pattern without explicit declaration.

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.

This happens if the item is explicitly positioned in a column outside the defined area or if the auto- placement algorithm generates additional columns to accommodate the content.

Possible values

  • <length> - Is a non-negative length.

  • <percentage> - Is a <percentage> value that is non-negative in relation to the grid container's block size. The percentage value is set as auto if the grid container's block size is indefinite.

  • <flex> - This value is a non-negative dimension with the unit fr, which indicates the flex factor of the track. Each track that has a certain size takes up a portion of the remaining space based on its flex factor.

  • max-content - It's a keyword that specifies the maximum content contribution of the grid elements that occupy the grid track.

  • min-content - It's a keyword that specifies the largest minimum content contribution of the grid elements within the grid track.

  • minmax(min, max) - This function defines a size range, from min to max values. If the maximum value is smaller than the minimum value, the maximum value isn't taken into account and the function only uses the minimum value.

  • fit-content( [ <length> | <percentage> ] ) - Represents the expression min(max-content, max(auto, argument)), which is calculated similarly to auto (i.e. minmax(auto, max-content)), but the track size is limited to the argument if it exceeds the auto minimum.

  • auto - The maximum and minimum values in a track indicate the maximum and minimum content sizes (specified by min-width/min-height), respectively, and auto covers the range between them when used alone outside minmax() notation.

Syntax

grid-auto-columns =  <track-size>+  
<track-size> = <track-breadth> minmax(<inflexible-breadth> , <track-breadth>) | fit-content(<length-percentage [0,∞]>)

Applies to

Grid containers.

CSS grid-auto-columns - <length> Value

The following example demonstrates the usage of grid-auto-columns using length.

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
   }
   .grid-container {
      display: grid;
      grid-auto-columns: 250px; /* Change this value to see the effect */
      gap: 10px;
      padding: 20px;
      background-color: #f5dbc1;
   }
   .item {
      background-color: #b05b05;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      border: 2px solid #333;
   }
</style>
</head>
<body>
<div class="grid-container">
   <div class="item">Box 1</div>
   <div class="item">BOx 2</div>
   <div class="item">Box 3</div>
   <div class="item">Box 4</div>
   <div class="item">Box 5</div>
   <div class="item">Box 6</div>
   <div class="item">Box 7</div>
   <div class="item">Box 8</div>
</div>
</body>
</html>

CSS grid-auto-columns - <percentage> Value

The following example demonstrates the usage of grid-auto-columns using percentage values.

<html>
<head>
<style>
   body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
   }
   .custom-grid {
      display: grid;
      grid-auto-columns: 65%;
      gap: 15px;
      padding: 20px;
      background-color: #a6e3e9;
      align-content: center; 
      justify-content: center; 
   }
   .custom-item {
      background-color: #f36886; 
      color: #1e1e1e; 
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px; 
      border: 2px solid #635353;
      border-radius: 8px; 
   }
</style>
</head>
<body>
<div class="custom-grid">
   <div class="custom-item">Custom Box 1</div>
   <div class="custom-item">Custom Box 2</div>
   <div class="custom-item">Custom Box 3</div>
   <div class="custom-item">Custom Box 4</div>
   <div class="custom-item">Custom Box 5</div>
   <div class="custom-item">Custom Box 6</div>
</div>
</body>
</html>

CSS grid-auto-columns - <flex> Value

The following example demonstrates the usage of grid-auto-columns using flex value that is fr.

<html>
<head>
<style>
   body {
      background-color: #F8ECE5;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
   }
   #unique-grid {
      display: grid;
      grid-template-rows: 150px 150px;
      grid-template-columns: fit-content(120px);
      grid-auto-columns: 1fr 0.5fr;
      grid-auto-flow: column;
      grid-gap: 20px;
      margin: 20px;
   }
   #unique-grid > div {
      background-color: #FF6F61;
      text-align: center;
      color: white;
      font-size: 22px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
</style>
</head>
<body>
<h1>Grid Layout using flex</h1>
<div id="unique-grid">
   <div>Item X</div>
   <div>Item Y</div>
   <div>Item Z</div>
   <div>Item W</div>
   <div>Item V</div>
   <div>Item U</div>
</div>
</body>
</html>

CSS grid-auto-columns - max-content Value

In the following example, the CSS grid-auto-columns: max-content; allows the grid to dynamically size additional columns based on the maximum content width within each column, ensuring a layout that adjusts according to the content of each grid element.

<html>
<head>
<style>
   body { 
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
   }
   #customGrid {
      height: 350px;
      display: grid;
      gap: 25px;
      background-color:  #348570;
      padding: 25px;
      grid-auto-columns: max-content;
   }
   #customGrid div {
      background-color: rgba(255, 255, 255, 1);
      text-align: center;
      padding: 25px 0;
      font-size: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }
   .boxA { grid-area: 1 / 1 / 2 / 2; }
   .boxB { grid-area: 1 / 2 / 2 / 3; }
   .boxC { grid-area: 1 / 3 / 2 / 4; }
   .boxD { grid-area: 2 / 1 / 3 / 2; }
   .boxE { grid-area: 2 / 2 / 3 / 3; }
   .boxF { grid-area: 2 / 3 / 3 / 4; }
</style>
</head>
<body>
<div id="customGrid">
   <div class="boxA">Grid Element A</div>
   <div class="boxB">Grid Element B</div>
   <div class="boxC">Grid Element C</div>
   <div class="boxD">Grid Element D</div>
   <div class="boxE">Grid Element E</div>
   <div class="boxF">Grid Element F</div>
</div>
</body>
</html>

CSS grid-auto-columns - min-content Value

In the following example, the CSS grid-auto-columns: min-content; allows the grid to dynamically size columns based on the minimum content width within each column, ensuring a layout that adjusts according to the content of each grid element.

<html>
<head>
<style>
   body {
      font-family: 'Courier New', monospace;
      margin: 0;
      padding: 0;
      background-color: #2C3E50;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }
   #uniqueGrid {
      display: grid;
      gap: 20px;
      background-color: #3498db;
      padding: 25px;
      grid-auto-columns: min-content;
      border-radius: 10px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
   }
   #uniqueGrid div {
      background-color: #ECF0F1;
      text-align: center;
      padding: 20px;
      font-size: 24px;
      border-radius: 8px;
   }
   .uniqueBox1 { grid-area: 1 / 1; }
   .uniqueBox2 { grid-area: 1 / 2; }
   .uniqueBox3 { grid-area: 1 / 3; }
   .uniqueBox4 { grid-area: 2 / 1; }
   .uniqueBox5 { grid-area: 2 / 2; }
   .uniqueBox6 { grid-area: 2 / 3; }
</style>
</head>
<body>
<div id="uniqueGrid">
   <div class="uniqueBox1">Custom Box 1</div>
   <div class="uniqueBox2">Custom Box 2</div>
   <div class="uniqueBox3">Custom Box 3</div>
   <div class="uniqueBox4">Custom Box 4</div>
   <div class="uniqueBox5">Custom Box 5</div>
   <div class="uniqueBox6">Custom Box 6</div>
</div>
</body>
</html>

CSS grid-auto-columns - fit-content() Value

The following example demonstrates the usage of grid-auto-columns using fit-content() value.

<html>
<head>
<style>
   body {
      background-color: #F0F2F5;
   }
   #custom-grid {
      display: grid;
      grid-template-rows: 200px 200px;
      grid-template-columns: fit-content(100px);
      grid-auto-columns: fit-content(100px);
      grid-auto-flow: column;
      grid-gap: 25px;
      margin: 20px;
   }
   #custom-grid > div {
      background-color: #3E4095;
      text-align: center;
      color: white;
      font-size: 28px;
      padding: 25px;
   }
</style>
</head>
<body>
<h1>Custom Grid Layout with fit-content()</h1>
<div id="custom-grid">
   <div>Element 1</div>
   <div>Element 2</div>
   <div>Element 3</div>
   <div>Element 4</div>
   <div>Element 5</div>
   <div>Element 6</div>
</div>
</body>
</html>

CSS grid-auto-columns - auto Value

In the following example, the CSS rule grid-auto-columns: auto; ensures that any additional columns created by the grid-auto-flow: column; property will have an automatic width, allowing the grid to dynamically adjust to the content of each column while maintaining a consistent width.

<html>
<head>
<style>
   body {
      background-color:#E7E9EB;
   }
   #grid {
      display: grid;
      grid-template-rows: 200px 200px;
      grid-template-columns: auto;
      grid-auto-columns: auto;
      grid-auto-flow: column;
      grid-gap: 25px;
   }
   #grid > div {
      background-color: #f09f26;
      text-align: center;
      color: white;
      font-size: 30px;
      padding: 25px;
   }
</style>
</head>
<body>
<h1>Grid layout with grid-auto-column</h1>
<div id="grid">
   <div>BOX A</div>
   <div>BOX B</div>
   <div>BOX C</div>
   <div>BOX D</div>
   <div>BOX E</div>
   <div>BOX F</div>
   <div>BOX G</div>
   <div>BOX H</div> 
</div>
</body>
</html>
Advertisements