CSS grid-auto-columns Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-auto-columns property in CSS is used in grid layouts to define the size of implicitly created columns. When items are placed outside the explicitly defined grid, new columns are created automatically.

The grid-auto-columns property specifies the size of these newly created columns, ensuring a consistent layout.

💡 Syntax

The syntax for the grid-auto-columns property is straightforward. You can specify a single value or multiple values separated by spaces.

Syntax

Copied

element {
  grid-auto-columns: value;
}

Here, value can be any valid length, percentage, or keyword that defines the column size.

🎛️ Default Value

The default value of the grid-auto-columns property is auto, which means the size of the implicitly created columns will be determined by the content inside them.

🏠 Property Values

Value	Description
length	A specific size in units such as px, em, rem, etc.
percentage	A percentage value relative to the grid container.
auto	Automatically determines the column size based on the content.
min-content	The smallest size that fits the content.
max-content	The largest size that fits the content.
fit-content()	A function that defines the size within a specified limit.
fr	A fraction of the available space.

📄 Example

In this example, we'll create a grid container where implicitly created columns have a fixed size of 100 pixels.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid-auto-columns Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-columns: 100px;
      gap: 10px;
    }
    .grid-item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Grid Container with Custom Auto Columns</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-auto-columns property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The grid-auto-columns property is a useful tool for managing the size of implicitly created columns in a grid layout.

By defining the size of these columns, you can ensure that your grid layout remains consistent and visually appealing, even when new columns are added automatically. Experiment with different values to see how this property can enhance the flexibility and responsiveness of your grid designs.