CSS 属性 grid-auto-columns 定义隐式创建的网格列的宽度或以没有显式声明的模式创建的网格列的宽度。
如果网格项放置在未显式创建的列中由 grid-template-columns 确定尺寸，网格系统会创建隐式网格列来容纳它。
这如果项目明确定位在定义区域之外的列中，或者自动放置算法生成附加列来容纳内容，则会发生这种情况。
属性值
<length>: 是非负长度。
<percentage>: 是一个非负的 <percentage> 值网格容器的块大小。如果网格容器的块大小不确定，则百分比值设置为auto。
<flex>: 该值是一个非负尺寸，单位为fr，表示轨道的弯曲系数。每个具有一定大小的轨道都会根据其弹性系数占用一部分剩余空间。
max-content: 这是一个关键字，指定占据网格轨道的网格元素的最大内容。
min-content: 这是一个关键字，指定网格轨道内网格元素的最大最小内容。
minmax(min, max): 此函数定义从最小值到最大值的大小范围。如果最大值小于最小值，则不考虑最大值，函数仅使用最小值。
fit-content( [ <length> | <percentage> ] ): 表示表达式 min(max-content, max(auto, argument))，其计算方式与 auto 类似（即 minmax(auto, max-content)），但如果轨道大小超过自动最小值，则轨道大小将受到参数的限制。
auto: 轨道中的最大值和最小值分别表示最大和最小内容大小（由 min-width/min-height 指定），并且auto在 minmax() 表示法之外单独使用时覆盖它们之间的范围。
语法
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; /* 改变这个值看看效果 */
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: max-content
在以下示例中，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: min-content
在以下示例中，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: auto
在以下示例中，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>