grid-template-columns: repeat(3, 1fr); 是 CSS Grid 布局中用于定义网格容器列的属性。这个属性通过 repeat 函数重复定义列的大小，使得代码更加简洁和易读。

解释

基本概念

  1. grid-template-columns 属性：

    • 用于定义网格容器的列轨道（column tracks）。
    • 每个值表示一列的宽度。

  2. repeat 函数：

    • repeat 函数用于重复定义列或行的大小，减少冗余代码。
    • 语法：repeat(次数, 重复的值)
    • 例如：repeat(3, 1fr) 表示重复定义3次，每次的值为 1fr。

  3. 1fr 单位：

    • fr 是分数单位（fraction unit），表示可用空间的一部分。
    • 1fr 表示该列占据可用空间的1份。

使用场景

  1. 等分列：

    • 当需要将网格容器的宽度等分成多列时，使用 repeat 函数可以方便地定义列的数量和大小。
    • 示例：将容器等分成3列。 
      .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

  2. 响应式布局：

    • 结合媒体查询，可以创建响应式网格布局，根据屏幕宽度动态调整列的数量和大小。
    • 示例： 
      .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .container {
    grid-template-columns: repeat(1, 1fr);
  }
}

  3. 动态内容：

    • 当网格项目数量或内容长度不确定时，使用 repeat 函数可以确保项目在容器内均匀分布。
    • 示例：一个动态生成的产品列表页面，每行显示3个产品卡片。 
      <div class="container">
  <div class="item">Product 1</div>
  <div class="item">Product 2</div>
  <div class="item">Product 3</div>
  <div class="item">Product 4</div>
  <div class="item">Product 5</div>
  <div class="item">Product 6</div>
</div>

      .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px; /* 项目之间的间距 */
}
.item {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

底层原理

  1. 网格轨道（Grid Tracks）：

    • 网格轨道是网格线之间的空间，表示行或列。
    • grid-template-columns: repeat(3, 1fr); 定义了3个列轨道，每个轨道的宽度为可用空间的1份。

  2. 分数单位（fr）：

    • 1fr 表示该列占据可用空间的1份。
    • 如果容器的总宽度为900px，那么每个列的宽度将是300px（900px / 3）。

  3. 重复定义：

    • repeat(3, 1fr) 等同于 1fr 1fr 1fr，但使用 repeat 函数可以减少冗余代码，提高可读性。

示例代码

以下是一个完整的示例，展示了如何使用 grid-template-columns: repeat(3, 1fr); 创建一个等分的网格布局：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout Example</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px; /* 项目之间的间距 */
      background-color: #f0f0f0;
      padding: 10px;
    }
    .item {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</body>
</html>

总结

grid-template-columns: repeat(3, 1fr); 是 CSS Grid 布局中用于定义等分列的一个简洁而强大的属性。

# php
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

【信创-k8s】海光/兆芯+银河麒麟V10离线部署k8s1.31.8+kubesphere4.1.3

介于V4优秀的LuBan架构，核心组件非常少，资源占用也显著降低，同时带来众多功能和便利性。：使用海光3350/兆芯开先KX-5000芯片，麒麟V10 SP3操作系统，以及Containerd 1.7.13、Kubernetes v1.31.8、KubeSphere v4.1.3等软件版本。原创编写，详细记录了从环境准备到平台验证的完整流程，为信创环境下的Kubernetes与KubeSphere

avatar 2048 AI社区
cover

从狂热到深耕：一个AI从业者的智能体创业心路历程

avatar 2048 AI社区

MCP：从被动响应到自主执行的自动化协议

AI正突破传统代码生成边界，向全流程智能调度演进。MCP（Model Context Protocol）作为开放协议，为AI与工具建立统一接口，实现跨模型、跨工具的复杂流程编排。其核心价值在于生态复用、安全可控和上下文感知，通过客户端-服务器架构让AI自主调用API完成从代码检查到性能优化的全流程。相比Function Call的单次调用，MCP支持多工具串联和本地数据处理，将重塑前端开发模式——

avatar 2048 AI社区