网格布局入门学习

马黑黑 发表于 2022-10-12 21:13

本帖最后由马黑黑于 2022-11-9 18:08 编辑 <br /><br /><style>
#papa { margin: auto; padding: 10px; width: 700px; box-shadow: 3px 3px 20px #000; display: grid; grid-template-columns: 60px auto 260px; grid-template-rows: 30px; font: normal 1em/30px sans-serif; }
#papa > span { padding: 0 10px; }
#papa a { text-decoration: none; }
#papa a:hover { text-decoration: none; color: red; }
#papa a:visited { text-decoration: none; color: purple; }
.tit { font: bold 1.1em/30px sans-serif; background: lightblue; }
</style>

<h1 style="margin-bottom: 16px;font: bold 2em sans-seirf; text-align:center; color: snow; text-shadow: 2px 2px 3px #000;">网格布局入门学习目录</h1>
<div id="papa"></div>
<script>
let ar = [
['第一讲：列与行','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1744534&fromuid=7130','12宫格'],
['第二讲：行列尺寸与间距','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1745237&fromuid=7130','高宽、间距设置'],
['第三讲：网格合并','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1745967&fromuid=7130','网格线是合并的基础'],
['第四讲：小试牛刀 - 用grid布局帖子（上）','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1746855&fromuid=7130','新知识点:fr 等分单位'],
['第五讲：小试牛刀 - 用grid布局帖子（下）','/forum.php?mod=viewthread&tid=63835&pid=1747042&page=1&extra=#pid1747042','成品帖子演示'],
['第六讲：grid-area','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1747402&fromuid=7130','语法糖'],
['第七讲：grid-area和grid-template-areas','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1748401&fromuid=7130','另一种合并单元格的方法'],
['第八讲：grid-template-areas布局的行高列宽问题','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1749816&fromuid=7130','Areas布局中处理行列尺寸'],
['第九讲：auto-fill','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1750628&fromuid=7130','子项目自动填充（适应）'],
['第十讲：网格容器规范子项目的对齐方式','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1751652&fromuid=7130','auto-fill与auto-fit'],
['第十一讲：制作一个音频播放控制器','/forum.php?mod=viewthread&tid=63988&extra=page%3D1','应用实例'],
['第十二讲：div+span模拟表格','https://www.huachaowang.com/thread-64135-1-1.html','应用实例'],
['第十三讲：花瓣圆球','/forum.php?mod=redirect&goto=findpost&ptid=63785&pid=1772032&fromuid=7130','应用实例'],
];

papa.style.setProperty('grid-template-rows', 'repeat(' + (ar.length+1) + ', 30px)');
let str = '<span class="tit">序号</span><span class="tit">标题</span><span class="tit">备注</span>';
ar.forEach((item,key) => {
str += `<span>${key+1}</span><span><a href="${item}">${item}</a></span><span>${item}</span>`;
});
papa.innerHTML = str;
</script>

马黑黑 发表于 2022-10-12 21:38

本帖最后由马黑黑于 2022-10-12 21:51 编辑

网格布局是CSS布局中最高级的布局，也是唯一的二维布局。实际上，它和表格很相似，由横线和竖线组成一个个的单元格，这些单元格既可以独立存在，也可以与邻近的单元格合并成新的单元格。总体上看，网格布局以单元格为基本单位，通过对单元格的操作进行页面布局。

要使用网格布局，我们需要通过 CSS 的 display 属性调用 grid ，例如：

.mainbox {
display: grid;
}

选择器 .mainbox 就启用了网格布局模式。但显然还不够，它还不能生成网格，我们需要其他的属性。现在，以生成 4*3 即四行三列的网格为例，让我们完善上面的 .mainbox 盒子：

.mainbox {
   margin: auto;
   padding: 20px;
   width: 600px;
   height: 660px;
   box-shadow: 3px 3px 20px #000;
   display: grid;
   grid-template-rows: auto auto auto auto;
   grid-template-columns: auto auto auto;
}

只有着色的代码语句与网格有关。display: grid; 我们已经解释过，它声明 mainbox 盒子以网格形式布局；grid-template-rows: auto auto auto auto;，grid-template-rows 是个组合词，大意是网格切割行（template是模板之意，模板是切割出来的），可以简单理解为网格行，下行代码中的 grid-template-columns 则可以理解为网格列。注意观察它们的赋值：行用了四个 auto，auto是自动的意思，列用了三个 auto。这表明，mainbox 盒子行分为4个，列分为三个，这就得出 4*3 的12宫格了——这12宫格将由 mainbox 的子元素构成，我们打算用 div 标签来做子标签，它们也应该有自己的简单样式，以便有助于我们对之进行观察：

.mainbox > div {
   border: 1px dotted pink;
   padding: 10px;
}

最后，HTML代码就是一道美味菜了：

<div class="mainbox">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <div>6</div>
   <div>7</div>
   <div>8</div>
   <div>9</div>
   <div>10</div>
   <div>11</div>
   <div>12</div>
</div>

上面这12个div，由于它们的父元素 mainbox 使用了 grid 布局，且定义了 grid-template-rows（行）和 grid-template-columns（列），所以，它们不是按照从上往下的文档流规律逐一排列下去，而是形成了 mainbox 预设的 4*3 的 12宫格。效果看楼下。

马黑黑 发表于 2022-10-12 21:39

本帖最后由马黑黑于 2022-10-13 07:31 编辑 <br /><br /><p>二楼代码效果演示：<br><br></p>

<style>
._mainBox {
margin: auto;
padding: 20px;
width: 600px;
height: 600px;
box-shadow: 3px 3px 20px #000;
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-columns: auto auto auto;
}
._mainBox > div {
border: 1px dotted pink;
padding: 10px;
}
</style>

<div class="_mainBox">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>

相约爱晚亭 发表于 2022-10-12 21:50

好教程！点赞！

红影发表于 2022-10-12 21:59

搬个小板凳，认真学习。谢谢黑黑{:4_187:}

马黑黑 发表于 2022-10-12 22:16

相约爱晚亭发表于 2022-10-12 21:50
好教程！点赞！

不知道过去接触过木有

马黑黑 发表于 2022-10-12 22:16

红影发表于 2022-10-12 21:59
搬个小板凳，认真学习。谢谢黑黑

这个东西多

红影发表于 2022-10-12 22:24

马黑黑发表于 2022-10-12 22:16
这个东西多

网络布局后，才能各就其位。

马黑黑 发表于 2022-10-12 22:26

红影发表于 2022-10-12 22:24
网络布局后，才能各就其位。

属性多是网格布局的一大特点和难点，我将尽可能简化它的知识体系，从简入手，一步一步让感兴趣的童鞋对网格布局有个相对完整的认识。

红影发表于 2022-10-12 22:35

马黑黑发表于 2022-10-12 22:26
属性多是网格布局的一大特点和难点，我将尽可能简化它的知识体系，从简入手，一步一步让感兴趣的童鞋对网 ...

谢谢黑黑，辛苦了{:4_187:}

马黑黑 发表于 2022-10-12 22:36

红影发表于 2022-10-12 22:35
谢谢黑黑，辛苦了

举手之劳

寒冬残荷 发表于 2022-10-12 22:44

认真学习老师传授新知识！

马黑黑 发表于 2022-10-12 23:03

寒冬残荷发表于 2022-10-12 22:44
认真学习老师传授新知识！

不算新，算式旧知识呢，都出来好久了

寒冬残荷 发表于 2022-10-12 23:27

寒冬残荷 发表于 2022-10-12 23:28

寒冬残荷发表于 2022-10-12 23:27
.mainbox {position:relative; margin:auto; padding:20px; width:680px; height:900px; box-shadow:3p ...

练习老师讲授的内容。{:5_117:}

寒冬残荷 发表于 2022-10-12 23:29

马黑黑发表于 2022-10-12 23:03
不算新，算式旧知识呢，都出来好久了

对我来说是新课呀。

相约爱晚亭 发表于 2022-10-12 23:42

马黑黑发表于 2022-10-12 22:16
不知道过去接触过木有

略知一点HTML，套用简单的代码做帖。

马黑黑 发表于 2022-10-13 07:26

相约爱晚亭发表于 2022-10-12 23:42
略知一点HTML，套用简单的代码做帖。

那这个grid布局应该是全新的东东了

马黑黑 发表于 2022-10-13 07:28

寒冬残荷发表于 2022-10-12 23:29
对我来说是新课呀。

对很多人来讲grid应该是完全陌生的东东。还有弹性布局，flex，以前在这里讲过。

马黑黑 发表于 2022-10-13 07:29

寒冬残荷发表于 2022-10-12 23:28
练习老师讲授的内容。

厉害哈，一下子能放这么多图片{:4_190:}

页: [1] 2 3 4 5

花潮论坛's Archiver

网格布局入门学习