css【详解】grid布局—— 网格布局(栅格布局)(二)

简介: 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-startgrid-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-startgrid-column-startgrid-row-endgrid-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-columnsgrid-template-rowsgrid-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-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-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>


目录
相关文章
|
12月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
361 99
|
11月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
11月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
11月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发 容器
处方单图片生成器, 处方单在线制作免费,js+css+html恶搞神器
这是一个电子处方模拟生成系统,使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识,并明确标注为模拟数据,仅供学习
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应

热门文章

最新文章