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

重新认识grid布局（下）

2022-10-18 82
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 重新认识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
目录
相关文章
wscwdie
|
6月前
|
前端开发 开发者 UED
解锁网页布局的秘密武器：探索 CSS Grid 布局的神奇魔力
解锁网页布局的秘密武器：探索 CSS Grid 布局的神奇魔力
wscwdie
54 3
忆凡
|
前端开发 容器
前端页面布局之【Grid布局】详解
前端页面布局之【Grid布局】详解
忆凡
546 0
大树营养快线
|
20天前
|
前端开发 容器
如何使用 Flexbox 布局实现圣杯布局？
【10月更文挑战第27天】
大树营养快线
23 0
阿珊和她的猫
|
6月前
|
前端开发 开发者 UED
CSS布局模式之Flex布局&Grid布局（一）
CSS布局模式之Flex布局&Grid布局
阿珊和她的猫
98 0
阿珊和她的猫
|
6月前
|
前端开发 容器
CSS布局模式之Flex布局&Grid布局（三）
CSS布局模式之Flex布局&Grid布局
阿珊和她的猫
105 0
阿珊和她的猫
|
6月前
|
前端开发 开发者 容器
CSS布局模式之Flex布局&Grid布局（二）
CSS布局模式之Flex布局&Grid布局
阿珊和她的猫
128 0
前端技术栈
|
6月前
|
前端开发 容器
Flex布局的三个属性要深刻理解！
Flex布局的三个属性要深刻理解！
前端技术栈
82 0
怒放de生命
|
6月前
使用flex布局实现,7种经典布局案例
使用flex布局实现,7种经典布局案例
怒放de生命
102 0
猫头虎
|
前端开发 Cloud Native Go
《深入Flexbox和Grid：现代CSS布局的秘密武器》
《深入Flexbox和Grid：现代CSS布局的秘密武器》
猫头虎
68 0
祁符建
|
前端开发
Flex 布局与传统布局的比较
在前端开发中，页面的布局是一个非常关键的问题。传统的布局方式，如使用浮动和定位来实现布局，虽然可以实现一定的布局效果，但是代码量较多，可维护性较差，难以实现复杂的布局需求。
祁符建
202 0