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

CSS 属性 grid-template-columns 定义了行的名称和网格中列的大小调整函数。

可能的值

none - 这是一个关键字，指示缺少显式网格结构。在这种情况下，列是隐式创建的，其大小由 grid-auto-columns 属性确定。
[line-name] - <custom-ident> 指定位于那里的行的名称。此标识符可以是任何有效的字符串，但保留术语 span 和 auto 除外。行可以有多个名称，用方括号内的空格分隔，例如 [line-name-a line-name-b]
<length> - 是一个非负长度，给出了列的宽度
<percentage> - 相对于网格容器的块大小，此值是非负的 <percentage>。如果网格容器的大小取决于其轨迹，则百分比的行为类似于 auto，用于确定容器的实际大小。
<flex> - 此值是单位 fr 的非负维度，表示轨道的弯曲系数。根据其弯曲系数，每个具有一定尺寸的轨道都会占用剩余空间的一部分。
max-content - 这是一个关键字，用于指定占据网格轨道的网格元素的最大内容贡献。
min-content - 这是一个关键字，用于指定网格轨道中网格元素的最大最小内容贡献。
minmax（min， max） - 此函数定义一个大小范围，从最小值到最大值。如果最大值小于最小值，则不考虑最大值，函数仅使用最小值。
auto - 最大值表示轨道中元素的最大最大内容大小。最小值指定元素的最大最小大小，通常是最小内容大小（由 min-width/min-height 指定）。
fit-content( [ <length> | <percentage> ] ) - 此公式 max（minimum， min（limit， max-content）））表示一种计算，其中 minimum 表示自动最小值（通常但不总是等于 min-content 的最小值），limit 表示作为参数传递给 fit-content（）的轨道调整大小函数。从本质上讲，它是 minmax（auto， max-content）和 minmax（auto， limit）之间的较小值。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) - 表示轨道列表的重复部分，并允许以更压缩的方式编写具有重复模式的众多列。
subgrid - 如果设置为子网格，这意味着网格将沿此轴继承其父网格的跨区部分。网格的行/列不是显式定义它，而是从父网格的定义派生而来。

语法

grid-template-columns = none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

适用于

网格容器。

CSS grid-template-columns - 使用 [行名]

以下示例演示如何使用行名指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 margin: 0;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 min-height: 100vh;
	 	 	 background-color: #f0f8ff;
	 	 	 font-family: 'Arial', sans-serif;
	 	}
	 	#container {
	 	 	 display: grid;
	 	 	 grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
	 	 	 gap: 15px;
	 	 	 max-width: 600px;
	 	 	 width: 80vw;
	 	 	 margin: auto;
	 	}
	 	#container > div {
	 	 	 background-color: #ff9966;
	 	 	 color: #fff;
	 	 	 font-size: 1.2em;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 padding: 20px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<div id="container">
	 	<div style="grid-column: col1 / col4;">Header Column</div>
	 	<div>Item One</div>
	 	<div>Item Two</div>
	 	<div>Item Three</div>
	 	<div>Item Four</div>
	 	<div>Item Five</div>
	 	<div>Item Six</div>
	 	<div>Item Seven</div>
	 	<div>Item Eight</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用<长度>

以下示例演示如何使用长度值指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f8f8f8;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #2ecc71;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: 120px 180px 150px;
	 	 	 border-radius: 15px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #3498db;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 padding: 30px 0;
	 	 	 font-size: 20px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with Length Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha</div>
	 	<div class="boxB">Beta</div>
	 	<div class="boxC">Gamma</div>
	 	<div class="boxD">Delta</div>
	 	<div class="boxE">Theta</div>
	 	<div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用<百分比>

以下示例演示如何使用百分比中的长度值指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f8f8f8;
	 	 	 font-family: 'Verdana', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #e74c3c;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: 20% 40% 20%;
	 	 	 border-radius: 15px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #3498db;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 padding: 30px 0;
	 	 	 font-size: 20px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with Percentage Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha</div>
	 	<div class="boxB">Beta</div>
	 	<div class="boxC">Gamma</div>
	 	<div class="boxD">Delta</div>
	 	<div class="boxE">Theta</div>
	 	<div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用 <flex>

以下示例演示如何使用 fr 中的弹性值指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f0f0f0;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 250px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #2ecc71;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: 0.5fr 1fr 1.5fr;
	 	 	 border-radius: 15px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #3498db;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 padding: 20px 0;
	 	 	 font-size: 25px;
	 	 	 border-radius: 5px;
	 	 	 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with Fractional Unit (fr) Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha</div>
	 	<div class="boxB">Beta</div>
	 	<div class="boxC">Gamma</div>
	 	<div class="boxD">Delta</div>
	 	<div class="boxE">Theta</div>
	 	<div class="boxF">Lambda</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用 max-content

以下示例演示如何使用 max-content 指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f5f5f5;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #b0b5b3;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: max-content max-content max-content;
	 	 	 border-radius: 15px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #2980b9;
	 	 	 color: #fff;
	 	 	 text-align: center;
	 	 	 padding: 20px;
	 	 	 font-size: 16px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	 	 	 overflow: hidden;
	 	 	 white-space: nowrap;
	 	 	 text-overflow: ellipsis;
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with max-content Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha Element with some content</div>
	 	<div class="boxB">Beta Element</div>
	 	<div class="boxC">Gamma Element</div>
	 	<div class="boxD">Delta Element</div>
	 	<div class="boxE">Theta Element</div>
	 	<div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用 min-content

以下示例演示如何使用 min-content 指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f4f4f4;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #c8cfcc;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: min-content min-content min-content;
	 	 	 border-radius: 15px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #2c3e50;
	 	 	 color: #ecf0f1;
	 	 	 text-align: center;
	 	 	 padding: 20px;
	 	 	 font-size: 16px;
	 	 	 border-radius: 8px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with min-content Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha Element with some content</div>
	 	<div class="boxB">Beta Element</div>
	 	<div class="boxC">Gamma Element</div>
	 	<div class="boxD">Delta Element</div>
	 	<div class="boxE">Theta Element</div>
	 	<div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-colums - 使用 minmax（）

以下示例演示如何使用 minmax（）指定网格列

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #f4f4f4;
	 	 	 font-family: 'Arial', sans-serif;
	 	 	 margin: 0;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 height: 100vh;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 20px;
	 	 	 background-color: #c8cfcc;
	 	 	 padding: 20px;
	 	 	 grid-template-columns: minmax(50px, 0.5fr) minmax(150px, 1fr) minmax(50px, 0.8fr);
	 	 	 border-radius: 10px;
	 	}
	 	#customGrid div {
	 	 	 background-color: #2c3e50;
	 	 	 color: #ecf0f1;
	 	 	 text-align: center;
	 	 	 padding: 10px;
	 	 	 font-size: 20px;
	 	 	 border-radius: 5px;
	 	 	 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	 	}
</style>
</head>
<body>
<h1>The grid-template-columns with minmax(min, max) Values</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha Element with some content</div>
	 	<div class="boxB">Beta Element</div>
	 	<div class="boxC">Gamma Element</div>
	 	<div class="boxD">Delta Element</div>
	 	<div class="boxE">Theta Element</div>
	 	<div class="boxF">Lambda Element some content</div>
</div>
</body>
</html>

CSS grid-template-columns - 使用 repeat（）

以下示例演示如何使用 repeat 函数指定网格列大小。

<html>
<head>
<style>
	 	/* Apply styles to the grid container */
	 	#grid {
	 	 	 display: grid;
	 	 	 width: 100%;
	 	 	 grid-template-columns: repeat(4, 1fr); /* Four columns of equal width */
	 	 	 grid-template-rows: 50px 100px 150px ; /* Three rows of different height */
	 	 	 gap: 10px; /* Gap between grid items */
	 	}
	 	/* Styles for individual grid items */
	 	.area {
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 font-size: 1.5em;
	 	 	 color: white;
	 	}
	 	/* Specify background colors for different areas */
	 	#demo-areaA {
	 	 	 background-color: #3498db; /* Blue */
	 	 	 grid-column: 1 / span 2; /* Spans 2 columns */
	 	 	 grid-row: 1 / span 1; /* Spans 1 row */
	 	}
	 	#demo-areaB {
	 	 	 background-color: #e74c3c; /* Red */
	 	 	 grid-column: 3 / span 2; /* Spans 2 columns */
	 	 	 grid-row: 1 / span 1; /* Spans 1 row */
	 	}
	 	#demo-areaC {
	 	 	 background-color: #2ecc71; /* Green */
	 	 	 grid-column: 1 / span 4; /* Spans 4 columns */
	 	 	 grid-row: 2 / span 1; /* Spans 1 row */
	 	}
	 	#demo-areaD {
	 	 	 background-color: #f39c12; /* Orange */
	 	 	 grid-column: 2 / span 1; /* Spans 1 column */
	 	 	 grid-row: 3 / span 1; /* Spans 1 row */
	 	}
	 	#demo-areaE {
	 	 	 background-color: #9b59b6; /* Purple */
	 	 	 grid-column: 4 / span 1; /* Spans 1 column */
	 	 	 grid-row: 3 / span 1; /* Spans 1 row */
	 	}
</style>
</head>
<body>
	 	<div id="grid">
	 	 	 <div id="demo-areaA" class="area">One</div>
	 	 	 <div id="demo-areaB" class="area">Two</div>
	 	 	 <div id="demo-areaC" class="area">Three</div>
	 	 	 <div id="demo-areaD" class="area">Four</div>
	 	 	 <div id="demo-areaE" class="area">Five</div>
	 	</div>
</body>
</html>

CSS grid-template-colums - 使用自动

在以下示例中，网格容器的列大小由 CSS 规则 grid-template-columns： auto auto auto; 定义，该规则表示它应该有三个列，其宽度取决于其中的内容。

这将生成一个网格布局，其中每列的宽度会动态更改以适应内容。

<html>
<head>
<style>
	 	body {
	 	 	 background-color: #F2F5F8;
	 	 	 font-family: 'Arial', sans-serif;
	 	}
	 	#customGrid {
	 	 	 height: 300px;
	 	 	 display: grid;
	 	 	 gap: 10px;
	 	 	 background-color: #4CAF50;
	 	 	 padding: 15px;
	 	 	 grid-template-columns: auto auto auto;
	 	}
	 	#customGrid div {
	 	 	 background-color: rgba(255, 255, 255, 0.9);
	 	 	 text-align: center;
	 	 	 padding: 30px 0;
	 	 	 font-size: 24px;
	 	 	 border-radius: 10px;
	 	 	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	 	}
</style>
</head>
<body>
<h1>The grid-template-colum</h1>
<div id="customGrid">
	 	<div class="boxA">Alpha</div>
	 	<div class="boxB">Beta</div>
	 	<div class="boxC">Gamma</div>
	 	<div class="boxD">Delta</div>
	 	<div class="boxE">Theta</div>
	 	<div class="boxF">Lambda</div>
</div>
</body>
</html>

<< CSS - grid-template-areas 属性 CSS - grid-template-rows 属性 >>