记录—CSS Grid 布局:现代网页布局的强大工具

🧑‍ 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

 CSS Grid 布局(网格布局)是 CSS 中一种强大的二维布局系统,它彻底改变了我们构建网页布局的方式。与传统的布局方法(如浮动、定位或 Flexbox)相比,Grid 提供了更直观、更灵活的方式来创建复杂的网页布局。

一、Grid 布局的基本概念

1. 什么是 Grid 布局?

CSS Grid 是一个二维布局系统,可以同时处理的布局。它允许开发者将页面划分为多个区域,并精确定位和调整这些区域的大小和位置。

2. 核心术语

  • Grid Container(网格容器):应用 display: grid 的元素
  • Grid Item(网格项):网格容器的直接子元素
  • Grid Line(网格线):构成网格结构的分界线
  • Grid Track(网格轨道):两条相邻网格线之间的空间(行或列)
  • Grid Cell(网格单元格):四条网格线包围的最小单位
  • Grid Area(网格区域):任意数量的网格单元格组成的矩形区域

二、创建基本 Grid 布局

1. 定义一个网格容器

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;  /* 3列,宽度分别为100px,200px,100px */
  grid-template-rows: 100px 200px;           /* 2行,高度分别为100px,200px */
  gap: 10px;                                /* 网格项之间的间距 */
}

2. 简单的网格示例

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3列,每列等宽 */
  grid-template-rows: 100px 100px;        /* 2行,每行100px高 */
  gap: 15px;
}

.item {
  background: #4CAF50;
  padding: 20px;
  text-align: center;
}

三、Grid 布局的核心特性

1. 灵活的轨道大小

  • fr 单位:表示网格容器中的可用空间的一部分
  • minmax() 函数:定义大小范围
  • auto 关键字:根据内容自动调整
.container {
  grid-template-columns: 1fr minmax(200px, 1fr) 1fr;
  grid-template-rows: auto 1fr auto;
}

2. 响应式布局

.container {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

这个设置会创建尽可能多的 200px 宽的列来填充容器,如果空间不足则换行。

3. 网格项定位

可以精确控制网格项的位置:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

/* 简写形式 */
.item {
  grid-column: 1 / 3;  /* 从第1列线到第3列线 */
  grid-row: 1 / 2;     /* 从第1行线到第2行线 */
}

/* 跨越整个网格 */
.item {
  grid-column: 1 / -1;  /* 从第1列线到最后1列线 */
}

4. 命名网格线和区域

.container {
  display: grid;
  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 80px [footer-end];
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

四、Grid 布局的实际应用

1. 经典网页布局

.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 100px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

2. 图片画廊

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

3. 产品卡片网格

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 900px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .products {
    grid-template-columns: 1fr;
  }
}

五、Grid 与 Flexbox 的比较

经验法则:

  • 使用 Grid 进行宏观布局(整个页面的结构)
  • 使用 Flexbox 进行微观布局(组件内部的排列)

六、浏览器支持与渐进增强

CSS Grid 已被所有现代浏览器支持(包括 Edge 16+)。对于旧版浏览器,可以采用渐进增强的策略:

.container {
  display: flex;          /* 回退方案 */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: initial;
  }
}

本文转载于:https://juejin.cn/post/7521233387224154146

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

来源链接:https://www.cnblogs.com/smileZAZ/p/18959959

© 版权声明
THE END
支持一下吧
点赞5 分享
评论 抢沙发
头像
请文明发言!
提交
头像

昵称

取消
昵称表情代码快捷回复

    暂无评论内容