CSS grid-auto-columns 属性定义了隐式创建的网格列的宽度，或者在没有显式声明的情况下以模式创建的网格列的宽度。
如果将网格项放置在未由 grid-template-columns 显式确定大小的列中，则网格系统将创建隐式网格列来容纳它。
如果项目明确放置在定义区域之外的列中，或者如果自动放置算法生成其他列以容纳内容，则会发生这种情况。
可能的值
- <length>- 非负长度。
- <percentage> - 是一个 <percentage> 值，相对于网格容器的块大小是非负的。如果网格容器的块大小是不确定的，则百分比值将设置为自动。
- <flex> - 此值是非负维度，单位为 fr，表示轨道的弯曲系数。根据其弯曲系数，每个具有一定尺寸的轨道都会占用剩余空间的一部分。
- max-content - 这是一个关键字，用于指定占据网格轨道的网格元素的最大内容贡献。
- min-content- 这是一个关键字，用于指定网格轨道中网格元素的最大最小内容贡献。
- minmax(min, max) - 此函数定义一个大小范围，从最小值到最大值。如果最大值小于最小值，则不考虑最大值，函数仅使用最小值。
- fit-content( [ <length> | <percentage> ] ) - 表示表达式 min（max-content， max（auto， argument）），其计算方式类似于 auto （i.e. minmax（auto， max-content）），但如果超过自动最小值，则轨道大小仅限于参数。
- auto - 轨道中的最大值和最小值分别表示最大和最小内容大小（由 min-width/min-height 指定），当在 minmax（） 表示法之外单独使用时，auto 会覆盖它们之间的范围。
语法
grid-auto-columns = <track-size>+ <track-size> = <track-breadth> minmax(<inflexible-breadth> , <track-breadth>) | fit-content(<length-percentage [0,∞]>)
适用于
网格容器。
CSS grid-auto-columns - <length>值
以下示例演示了如何使用长度来使用 grid-auto-columns。
<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>值
以下示例演示了如何使用百分比值来使用 grid-auto-columns。
<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> 值
以下示例演示了如何使用 flex 值 fr 来使用 grid-auto-columns。
<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 - 最大内容值
在以下示例中，CSS grid-auto-columns： max-content; 允许网格根据每列中的最大内容宽度动态调整其他列的大小，从而确保布局根据每个网格元素的内容进行调整。
<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 - 最小内容值
在以下示例中，CSS grid-auto-columns： min-content; 允许网格根据每列中的最小内容宽度动态调整列的大小，从而确保布局根据每个网格元素的内容进行调整。
<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（） 值
以下示例演示了使用 fit-content（） 值的 grid-auto-columns 的用法。
<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 - 自动值
在以下示例中，CSS 规则 grid-auto-columns： auto; 确保由 grid-auto-flow： column; 属性创建的任何其他列都将具有自动宽度，从而允许网格动态调整到每列的内容，同时保持一致的宽度。
<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>
