AI 助理
备案控制台
开发者社区 云原生 文章 正文

重新认识grid布局（下）

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

项目属性

grid-column-start、grid-column-end、grid-row-start、grid-row-end


  • 直接指定数字(正数) 表示设置单元格的宽度和高度。从第几个网格线开始，到底几个网格线结束。


.container {
      display: grid;
      width: 800px;
      height: 400px;
      border: 5px solid orange;
      grid-template-rows: 100px 100px 100px;
      grid-template-columns: 100px 100px 100px;
    }
    .item1 {
      background: red;
      grid-column-start: 1;
      grid-column-end: 6;
      grid-row-start: 1;
      grid-row-end: 4;
    }


网络异常，图片无法展示
|


从上面可以看出，这里就不会去满足容器中指定的几行几列了。


  • 指定负数。表示从右往左开始。


.item1 {
      background: red;
      /* grid-column-start: 1;
      grid-column-end: 6; */
      grid-column-start: -1;
      grid-column-end: -3;
      grid-row-start: 1;
      grid-row-end: 4;
    }


网络异常，图片无法展示
|


  • 该属性值也可以设置容器中定义grid-template-columns, grid-template-rows中定义的网格线名字。


.container {
  display: grid;
  width: 800px;
  height: 400px;
  border: 5px solid orange;
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
  grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
}
.item1 {
  background: red;
  grid-column-start: a1;
  grid-column-end: a3;
  grid-row-start: r1;
  grid-row-end: r4;
}


网络异常，图片无法展示
|


  • 该属性的第一个值可以指定为span, 然后加上一个数字或者容器中定义grid-template-columns, grid-template-rows中定义的网格线名字。表示跨域几个单元格，或者跨越到那个网格线。grid-column-start表示从左向右，grid-column-end表示从右向左。grid-row-start表示从上到下，grid-row-end表示从下到上。


.container {
  display: grid;
  width: 800px;
  height: 400px;
  border: 5px solid orange;
  grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
  grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
}
.item1 {
  background: red;
  grid-column-start: span 3;
  grid-row-start: span r2;
}


网络异常，图片无法展示
|


grid-column、grid-row


分别为grid-column-start、grid-column-end 和 grid-row-start、grid-row-end的简写。


grid-column: 2 / 4;
  grid-row: 2 / 4;


网络异常，图片无法展示
|


grid-area


指定该项放在那个区域。这个区域的定义是在容器的grid-template-areas。


.container {
      display: grid;
      width: 800px;
      height: 400px;
      border: 5px solid orange;
      grid-template-rows: [r1] 100px [r2] 100px [r3] 100px [r4];
      grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
      grid-template-areas:
        "a a a"
        "b c c"
        "b c c";
    }
    .item1 {
      background: red;
      grid-area: c;
    }


网络异常，图片无法展示
|


这个属性可以很好地控制元素的位置。


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


grid-area: r2 / a3 / 4 / 4;


网络异常，图片无法展示
|


justify-self


定义指定单元格的内容水平方向排列顺序。默认值为stretch。表示占满整个单元格宽度。


justify-self: center;


网络异常，图片无法展示
|


align-self

定义指定单元格的内容垂直方向排列顺序。默认值为stretch。表示占满整个单元格高度。


justify-self: center;
  align-self: center;


网络异常，图片无法展示
|


place-self


align-self和justify-self属性的简写形式。


place-self: center start;


网络异常，图片无法展示
|


具体的值请访问mdn吧。其实这些单元格或者全部单元格的排列方式和flex布局一样。想要了解他的形式，请访问mdn。


练习

grid制作骰子


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box1 div {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 2/2/3/3;
    }
    /* #box2{width:100px;height:100px;border-radius: 10%;border:1px solid black;display: grid;grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(4,1fr);justify-items: center;align-items: center;
        }
        #box2 div:nth-child(1){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 2/2/3/3;}
        #box2 div:nth-child(2){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 3/3/4/4;} */
    #box2 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box2 div:nth-child(1) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/1/2/2;
    }
    #box2 div:nth-child(2) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/3/4/4;
    }
    #box3 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box3 div:nth-child(1) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/1/2/2;
    }
    #box3 div:nth-child(2) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 2/2/3/3;
    }
    #box3 div:nth-child(3) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/3/4/4;
    }
    /* #box4{width:100px;height:100px;border-radius: 10%;border:1px solid black;display: grid;grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(4,1fr);justify-items: center;align-items: center;
        }
        #box4 div:nth-child(1){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 2/2/3/3;}
        #box4 div:nth-child(2){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 2/3/3/4;}
        #box4 div:nth-child(3){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 3/2/4/3;}
        #box4 div:nth-child(4){width:20px;height:20px;background:black;border-radius: 50%;;grid-area: 3/3/4/4;} */
    #box4 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box4 div:nth-child(1) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/1/2/2;
    }
    #box4 div:nth-child(2) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/3/2/4;
    }
    #box4 div:nth-child(3) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/1/4/2;
    }
    #box4 div:nth-child(4) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/3/4/4;
    }
    #box5 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box5 div:nth-child(1) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/1/2/2;
    }
    #box5 div:nth-child(2) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/3/2/4;
    }
    #box5 div:nth-child(3) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 2/2/3/3;
    }
    #box5 div:nth-child(4) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/1/4/2;
    }
    #box5 div:nth-child(5) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/3/4/4;
    }
    #box6 {
      width: 100px;
      height: 100px;
      border-radius: 10%;
      border: 1px solid black;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      justify-items: center;
      align-items: center;
    }
    #box6 div:nth-child(1) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/1/2/2;
    }
    #box6 div:nth-child(2) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 1/3/2/4;
    }
    #box6 div:nth-child(3) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 2/1/3/2;
    }
    #box6 div:nth-child(4) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 2/3/3/4;
    }
    #box6 div:nth-child(5) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/1/4/2;
    }
    #box6 div:nth-child(6) {
      width: 20px;
      height: 20px;
      background: black;
      border-radius: 50%;
      ;
      grid-area: 3/3/4/4;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div></div>
  </div>
  <div id="box2">
    <div></div>
    <div></div>
  </div>
  <div id="box3">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="box4">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="box5">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div id="box6">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>


网络异常，图片无法展示
|


移动布局案例


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #content {
      width: 321px;
      height: 425px;
      border: 1px black solid;
      margin: 30px auto;
    }
    #parent {
      width: 278px;
      height: 346px;
      color: white;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, 1fr);
      grid-template-areas: "a1 a2 a2""a3 a2 a2""a4 a4 a5""a6 a7 a7";
      justify-content: space-evenly;
      grid-gap: 8px 8px;
    }
    #text {
      color: black;
      font-size: 14px;
      margin-top: 7px;
      margin-bottom: 7px;
      margin-left: 15px;
    }
    #parent div:nth-of-type(1) {
      grid-area: a1;
      background: #1f99f5;
      /* width:87px;height:81px; */
      display: grid;
    }
    #parent div:nth-of-type(1) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(1) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -27px;
    }
    #parent div:nth-of-type(2) {
      grid-area: a2;
      background: #1f99f5;
      display: grid;
    }
    #parent div:nth-of-type(2) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(2) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -74px;
    }
    #parent div:nth-of-type(3) {
      grid-area: a3;
      background: #ff4074;
      display: grid;
    }
    #parent div:nth-of-type(3) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(3) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -20px;
    }
    #parent div:nth-of-type(4) {
      grid-area: a4;
      background: #1f99f5;
      display: grid;
    }
    #parent div:nth-of-type(4) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(4) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -19px;
    }
    #parent div:nth-of-type(5) {
      grid-area: a5;
      background: #1f99f5;
      display: grid;
    }
    #parent div:nth-of-type(5) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(5) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -19px;
    }
    #parent div:nth-of-type(6) {
      grid-area: a6;
      background: #e07100;
      display: grid;
    }
    #parent div:nth-of-type(6) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(6) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -19px;
    }
    #parent div:nth-of-type(7) {
      grid-area: a7;
      background: #e07100;
      display: grid;
    }
    #parent div:nth-of-type(7) p {
      font-size: 12px;
      justify-self: end;
      margin-top: 3px;
      margin-right: 3px;
    }
    #parent div:nth-of-type(7) h3 {
      font-size: 14px;
      justify-self: center;
      margin-top: -19px;
    }
    #parent {
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="content">
    <h2 id="text">今日上榜</h2>
    <div id="parent">
      <div>
        <p>七日关注</p>
        <h3>高通技术授权</h3>
      </div>
      <div>
        <p>热门搜索</p>
        <h3>美国中期选举</h3>
      </div>
      <div>
        <p>七日关注</p>
        <h3>双11消费提示</h3>
      </div>
      <div>
        <p>热门搜索</p>
        <h3>迪士尼收购福克斯</h3>
      </div>
      <div>
        <p>体育热点</p>
        <h3>上港首夺中超</h3>
      </div>
      <div>
        <p>体育热点</p>
        <h3>王思聪抽奖</h3>
      </div>
      <div>
        <p>七日关注</p>
        <h3>苹果遭起诉</h3>
      </div>
    </div>
  </div>
</body>
</html>


网络异常，图片无法展示
|


文章标签：
容器
游客onesoximwfy4q
目录
相关文章
我是快乐的嘟嘟
|
11月前
|
数据采集 搜索推荐 UED
异步渲染对 SEO 的影响及应对策略
【10月更文挑战第23天】异步渲染在提升用户体验和性能的同时，确实会给 SEO 带来一定的挑战。但通过合理运用预渲染、提供静态版本、设置爬虫抓取时间、优化页面结构和内容以及使用服务端渲染等策略，可以有效地解决这些问题，实现 SEO 和用户体验的双赢。在未来的网页开发中，我们需要更加注重异步渲染技术与 SEO 的协调发展，以适应不断变化的网络环境和用户需求。
我是快乐的嘟嘟
175 64
蓝易云
|
7月前
|
XML JSON Linux
Reqable：跨平台HTTP开发与调试工具
Reqable是一款功能强大且易于使用的跨平台HTTP开发与调试工具，具有多平台支持、全面的HTTP请求构建与解析、请求历史记录和环境管理等功能。它简化了HTTP请求的构建、发送和响应分析过程，为开发者提供了极大的便利。通过Reqable，开发者可以更高效地进行HTTP开发和调试，提高工作效率和代码质量。
蓝易云
537 26
modelscope
|
7月前
|
存储 人工智能 数据可视化
ModelScope魔搭25年3月发布月报
在这个春天里，小鲸鱼的DeepSeek-R1系列在模型社区掀起的巨大浪潮尚未平息，我们又迎来了千问的QwQ-32B正式版本，社区在Reasoning模型上的热情还在升温。除此之外，业界其他模型在过去一
modelscope
182 1
无糖可乐嘟嘟
|
机器学习/深度学习 人工智能 安全
探索操作系统的未来：智能化与安全性的双轮驱动
在数字化时代的浪潮中，操作系统作为计算机系统的核心，其发展趋势备受关注。本文深入探讨了未来操作系统发展的两大主轴——智能化与安全性，分析了这两者如何相互影响并共同塑造操作系统的进化路径。文章首先概述了智能化操作系统的概念及其对用户体验的潜在改变，接着详细讨论了安全性在未来操作系统设计中的重要性，并提出了相应的策略和措施。最后，通过案例分析，展示了智能化和安全性如何在实际操作系统中得以实现和优化，为读者提供了对操作系统未来发展的深刻洞察。
无糖可乐嘟嘟
155 29
游客io6musbi47krs
|
Java Nacos Sentinel
牛逼!这份神仙级Spring Cloud Alibaba全套笔记,几乎涵盖了所有操作
Spring Cloud 和微服务的重要性大家都知道了，Spring Cloud 现在已经成了微服务事实上的标准框架，也是 Java 程序员必须掌握的技术系列之一。
游客io6musbi47krs
1299 1
热爱技术的小郑
|
Java 微服务 Spring
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
文章介绍了如何利用Spring Cloud Alibaba快速构建大型电商系统的分布式微服务，包括服务限流降级等主要功能的实现，并通过注解和配置简化了Spring Cloud应用的接入和搭建过程。
热爱技术的小郑
1039 0
SpringBoot+Vue+Spring Cloud Alibaba 实现大型电商系统【分布式微服务实现】
Yaiba123
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果，并提供了详细的示例代码和运行效果。
Yaiba123
5279 0
AokSend接口-API
|
数据挖掘 API 开发者
​Email API有哪些，最好的3个API接口有哪些
Email API如SendGrid、Mailgun和AOKSend是企业自动化邮件通信的关键工具。它们提供邮件发送、接收和管理功能，提升效率，优化客户体验。SendGrid以其高可靠性、强大分析和易于集成备受青睐；Mailgun以灵活性和高发送率著称；而AOKSend则以其高效、详细分析和易用性脱颖而出。通过使用这些API，企业能实现定制化邮件服务，跟踪性能，提升邮件营销效果。
AokSend接口-API
236 1
aliyun7689123603-22772
|
机器学习/深度学习 自然语言处理 人机交互
FunAudioLLM测评
FunAudioLLM测评
aliyun7689123603-22772
620 0
木易巷
|
前端开发 JavaScript
炫酷的流动爱心最近很火 来吧 代码已奉上
炫酷的流动爱心最近很火 来吧 代码已奉上
木易巷
595 2

热门文章

最新文章

  • 1
    网页特殊符号HTML代码大全
  • 2
    什么是Widevine？Widevine DRM详解
  • 3
    Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算
  • 4
    杨老师课堂_Java教程第六篇之引用数据类型_类的运用
  • 5
    Point Grey articles link
  • 6
    培养我们的目标感
  • 7
    IE6中png图片透明方法
  • 8
    A Go library implementing an FST (finite state transducer)——mark下
  • 9
    在网站设计中非常有用的10款在线生成工具
  • 10
    3Animation动画的创建，CCSpeed,CCFollow
  • 1
    《时序数据监控平台优化指南：从查询超时到秒级响应，指标下的存储与检索重构实践》
    18
  • 2
    《API网关性能优化指南：从请求拥堵到毫秒级响应，并发下的架构重构实践》
    23
  • 3
    边缘大型AI模型：协作部署与物联网应用——论文阅读
    49
  • 4
    基于 Cloudflare Workers 构建高性能知识库镜像服务：反向代理与 HTML 动态重写实践
    36
  • 5
    PINN训练新思路：把初始条件和边界约束嵌入网络架构，解决多目标优化难题
    23
  • 6
    基于yolo8的深度学习室内火灾监测识别系统
    34
  • 7
    基于springboot的家校合作管理系统
    31
  • 8
    以Lama Cleaner的AI去水印工具理解人工智能中经常会用到GPU来计算的CUDA是什么？ 优雅草-卓伊凡
    23
  • 9
    PowerShell域内信息收集技术—Powerview用法
    21
  • 10
    VMware Tools 13.0.5.0 发布 - 客户机操作系统无缝交互必备组件
    42

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云免费云服务器:个人用户每月750小时免费