css【详解】grid布局—— 网格布局（栅格布局）（二）-阿里云开发者社区

css【详解】grid布局—— 网格布局（栅格布局）（二）

2024-07-02 5

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： css【详解】grid布局—— 网格布局（栅格布局）（二）

css【详解】grid布局—— 网格布局（栅格布局）（一）：https://developer.aliyun.com/article/1556220

`span`

表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

span后的数字不能是负值，也不能是0，也不能是小数。

.item-1 {
  grid-column-start: span 2;
}

1号项目的左边框距离右边框跨越2个网格。

grid-column-end设置span不会产生任何效果

<div class="container">
    <div class="item-b"></div>
</div>

.item-b {
    grid-column-start: 2;
    grid-column-end: span 纵线3;
    grid-row-start: 第一行开始;
    grid-row-end: span 3;
}

如果网格布局中有多个网格线的命名是B或者是B-start

.container {
    display: grid;
    grid-template-columns: [B] 80px [B] auto [B] 100px [D] auto auto;
}

.item {
    grid-column-start: span B;
    grid-column-end: 4;
}

如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序

grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

斜杠以及后面的部分可以省略，默认跨越一个网格。

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

项目item-1占据第一行，从第一根列线到第三根列线。

也可以使用span关键字，表示跨越多少个网格。

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。

其他效果范例如下：

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

1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

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

指定项目的区域

.item-1 {
  grid-area: e;
}

1号项目位于e区域

grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

.container {
    grid: 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
}
.item {
    grid-area: 1 / 2 / 3 / 4;
}

.item {
grid-area: 4 A / span 4 / B / D;
 
/* 等同于 */
 
grid-row-start: 4 A;
grid-column-start: span 4;
grid-row-end: B;
grid-column-end: D;
}

.item {
grid-area: A / B / C;
 
/* 等同于 */
 
grid-area: A / B / C / B;
}

.item {
grid-area: 1 / 2 / 3;
 
/* 等同于 */
 
grid-area: 1 / 2 / 3 / auto;
}

.item {
grid-area: A / B;
 
/* 等同于 */
 
grid-area: A / B / A / B;
}

.item {
grid-area: 1 / 2;
 
/* 等同于 */
grid-area: 1 / 2 / auto / auto;
}

.item {
grid-area: A;
 
/* 等同于 */
grid-area: A / A / A / A;
}

.item {
grid-area: 2;
 
/* 等同于 */
grid-area: 2 / auto / auto / auto;
}

css中grid网格布局的经典应用——图文层叠_朝阳39的博客-CSDN博客

设置自动生成的行和列

“隐式网格” —— 是非正常网格，其在grid子项多于设置的单元格数量，或grid子项的位置出现在设定的网格范围之外时出现
“显式网格” —— 在规定容器内显示的网格

grid-auto-columns属性和grid-auto-rows属性用来设置“隐式网格” 的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

默认值是auto，可以是长度值、百分比值和fr值，也可以是min-content关键字和max-content关键字，也支持mimmax()函数和fit-content()函数，但是不支持repeat()函数。

划分好的网格是3行 x 3列，但是，8号项目指定在第4行，9号项目指定在第5行。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

上面代码指定新增的行高统一为50px（原始的行高为100px）。

其他合并简写属性

从易读易写的角度考虑，建议不要合并属性，所以了解即可，方便读懂别人的代码

`grid-template`

是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

.container {
    grid-template: 25% 100px auto 60px / 80px auto 100px;
}

.container { grid-template: none; }

属性值none表示将3个CSS属性都设置为初始值none。

.container {
    grid-template: 
        "葡萄 葡萄 葡萄" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "龙虾 养鱼 养鱼" 1fr 
        "西瓜 西瓜 西瓜" 1fr
        / 1fr 1fr 1fr;
}

网格线名称总是出现在网格尺寸和区域名称的两侧

.container {
    grid-template: 
        [row-name1-start] "葡萄 葡萄 葡萄" 1fr [row-name1-end row-name2-start]
        "龙虾 养鱼 养鱼" 1fr [row-name2-end]
        "龙虾 养鱼 养鱼" 1fr [row-name3-end]
        [row-name4-start] "西瓜 西瓜 西瓜" 1fr [row-name4-end]
        / [col-name-start] 1fr [col-name-end] auto;
}

[col-name1-end]和[col-name2-start]必须放在同一个中括号里面，否则就是不合法的。但是，在包含区域名称的grid-template缩写语法中，[col-name1-end][col-name2-start]既可以放在一个中括号中，也可以分开放在两个中括号中。

.container {
    grid-template: 
        "a" 1fr [name1-end name2-start]
        "b";
}
.container {
    grid-template: 
        "a" 1fr [name1-end]
        [name2-start] "b";
}

包含区域名称的grid-template缩写属性不支持repeat()函数

`grid`

是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

.container {
    grid: 25% 100px auto 60px / 80px auto 100px;
}

/* none表示设置所有子属性为初始值  */
grid: none

.container {
    grid: 100px 300px / 3fr 1fr;
}
 
/*  等同于  */
 
.container {
    grid-template-rows: 100px 300px;
    grid-template-columns: 3fr 1fr;
}

.container {
    grid: 100px 300px / auto-flow 200px;
}
 
/*  auto-flow 在斜杠左边时解析为row，在斜杠右边时解析为 column */
/*  所以上方代码等同于 */
 
.container {
    grid-template-rows: 100px 300px;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
}

Grid 布局 -- 实战范例

九宫格

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>
 
<style>
  .container {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .box {
    border: 1px solid;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
</style>

css【详解】grid布局—— 网格布局（栅格布局）（二）

`span`

指定项目的区域

设置自动生成的行和列

其他合并简写属性

`grid-template`

`grid`

Grid 布局 -- 实战范例

九宫格

热门文章

最新文章

相关课程

相关电子书

相关实验场景