CSS - grid-auto-columns 属性_CSS 菜鸟教程

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>

<< CSS - grid-area 属性 CSS - grid-auto-flow 属性 >>