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)) 表示计算，其中最小值表示自动最小值（通常但并不总是等于 min-content 的最小值）， limit 表示作为参数传递给 fit-content() 的轨道调整大小函数。本质上，它是 minmax(auto, max-content) 和 minmax(auto, limit) 之间较小的值。
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ): 表示轨道列表的重复部分，并允许以重复模式写入多个列更压缩的方式。
子网格: 如果设置为子网格，这意味着网格将继承其父网格沿该轴的跨度部分。网格的行/列将从父网格的定义派生，而不是显式定义。
语法
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: <length>
以下示例演示使用长度值指定网格列
<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: <percentage>
以下示例演示使用百分比长度值指定网格列
<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()
以下示例演示指定网格列大小使用重复函数。
<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: auto
在以下示例中，网格容器的列大小由 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>