4 合并grid列_Grid教程

人类计算机技术发展到现在，每天都会有很多新的东西被创造出来，有一些受到了广泛的认可，推广开来。也有一些非常好的点，但是由于各种原因限制，而没有得到广泛的使用。今天要讨论的grid就是其中之一。

grid可以说是web布局的最新解决方案，也可以说是目前最好的解决方案。

以前我们布局，有一个东西叫做文档流，也就是说我们的页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会发生改变，如果说以前的文档流布局是一维布局的话，那么grid我们可以把它理解成二维布局。

一维布局：

二维布局：

从上面示意图中可以看出来，二维布局不需要局限于文档流的规则，布局更加灵活，接下来，我们一点点来了解一下这个神奇的东西吧：

首先，grid的基本概念其实就是在父元素身上挖坑，然后用子元素去填。这有点像我们上学的时候食堂里用来盛饭的盘子：

可以看到盘子上就已经挖好了各种形状，小方格，大方格... 如果有鱼，则可能会有更大的方格。那么这些方格就是在父元素身上去进行定义，子元素只需要填入对应的方格中，自然就成为那个方格的形状了。当然了，目前来说html页面中所有的元素都是矩形，这点需要注意一下。

说了这么多，概念都了解了，那接下来就开始来做点真东西吧。老是说吃的，都饿了！

要使用grid 那么首先需要把元素的display属性改为 grid

.box{display:grid;
}

现在，box这个元素就已经变成一个grid元素了，那么按照我们上面所说，现在需要在box身上去挖坑，其实也就是在box里面分行分列，这些行与列所组成的网格也就可以理解成一个个的坑了，就像插入excel表格一样。

比如说我们现在需要在box里面放4个元素，那么我们可以怎么去设置这些行与列呢？

我想到三种，

一种是4个元素在同一行，那么也就是：一行四列

一种是两个元素一行，那么也就是：两行两列

还有就是一个元素一行，那么也就是：四行一列

总之，我们首先需要弄清楚我们的元素会分成多少行，多少列。弄清楚这个之后才能去父级身上挖坑。

那么如何去规定父级身上的坑是多少行多少列呢？那就需要用到下面这两个属性了：

grid-template-columns
grid-template-rows

从属性上来看应该差不多能看明白了，第一个：grid-tamplate-columns 用来规定把父级的空间分割成多少列以及每一列的宽度，（column 也就是列的意思）。看案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {height: 300px;display: grid;grid-template-columns: 100px 200px 300px; }.box .item {background: #ddd;border: 1px solid #333; }</style>
</head>
<body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div>
</div></body>
</html>

可以看到在这个案例中，父级box身上设置了 grid-template-columns: 100px 200px 300px; 那么这就代表了把box分割成3列，并且第一列的宽度时100px、第二列的宽度是200px、第三列300px 以此类推。

然后可以发现每一个子元素都会有高度，这是由于我们并没有把box分割成为多行，所以默认box里面就只有一行，并且这一行的高度就是box的高度，所以子级的高度就统一是300了。

可以看到子级item身上并没有设置太多样式，紧紧是为了能看见所以设置了背景颜色，以及为了能区分开来这几个元素设置了边框。因为每一个item的宽度高度其实都已经被父级限定好了。

再来看grid-template-rows:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 300px;display: grid;grid-template-rows: 100px 200px 300px; }.box .item {background: #ddd;border: 1px solid #333; }</style>
</head>
<body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div>
</div></body>
</html>

在这个案例中，同样也只设置了 grid-template-rows: 100px 200px 300px; 这代表把box拆分成3行，并且第一行的高度是100px, 第二行 200px 以此类推。另外box给了个300的高度，所以每一列的高度就自动是300了。

经过上面两个案例，那么大概可以看出来，grid其实就是把父级的空间分成多少行多少列，并且设置每一行每一列的宽高度，以此来控制里面的子元素。结合起来，如果来一个两行三列，则可以这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 300px;display: grid;grid-template-columns: 100px 40% 100px;grid-template-rows: 100px 100px; }.box .item {background: #ddd;border: 1px solid #333; }</style>
</head>
<body><div class="box"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div></body>
</html>

可以看到在grid-template-columns里面我用到了40%, 没错了，在这里面可以用百分比，也可以使用其他的单位，说白了这里是为了设置子元素的宽度所以只要是宽度可以用的值在这里都是可以使用的。

另外有一个值需要特别注意一下，也是grid所独有的单位：fr 。它是一个相对单位，相当于弹性和模型里面的flex值。比如上面grid-template-columns的值也可以这样设置： grid-template-columns：1fr 1fr 1fr; 这样便是把box分成了三列，并且每一列的宽度都占box宽度的3分之一，为什么是三分之一呢？因为有3个fr。

那如果说这样呢？ grid-template-columns：1fr 1fr 3fr; 这样还是把box分成了3列，但是把box的宽度分成了5分，前面两个元素各占1分，最后这个元素则独占3分。

分成多少分，那就看总共有多少个fr 上面总共是5个fr。每个子元素则占据指定的分数。比如最后一个元素，它身上是3个fr 所以最后一列的宽度则是父级宽度的 3/5。

4 合并grid列_Grid教程相关推荐

【宝信IPLAT4J.V6】表格Grid的标题行合并和列合并写法
IPLAT4J.V6表格Grid的标题行合并和列合并写法标题列合并行合并补充 2022/11/07补充标题列合并标题列合并在kendo UI中已经提供了对应的配置方法,其在IPLAT框架中的 ...
java怎么写合并列sql_SQL STUFF函数拼接字符串多列合并成一列转
关于和并列的要这种效果. create table tb(idint, value varchar(10)) insert into tbvalues(1,'aa') insert into tbv ...
表格怎么合并两列数据php,怎么合并两列单元格的文字
合并两列单元格的文字的方法:首先打开一个excel表:然后选择一个要放合并之后内容的单元格,并在单元格中输入公式"=A1&B1()":最后按Enter回车键即可. 本文操作 ...
Excel合并同列相同内容单元格
原表如上所示,目标表如下所示: 具体步骤: 1.排序选定要合并的列,进行排序 2. 分类汇总选中首列后,点击工具栏-->数据-->(分级显示)分类汇总效果如上所示注意注意注意!!!! ...
dataframe多列合并成一列
DataFrame的几列数据合并成为一列 DataFrame的几列数据合并成为一列 1.1 方法归纳 1.2 .str.cat函数详解 1.2.1 语法格式: 1.2.2 参数说明: 1.2.3 核心 ...
R语言tidyr包Unite()函数实战详解：多个数据列合并为一列
R语言tidyr包Unite()函数实战详解:多个数据列合并为一列目录 R语言tidyr包Unite()函数实战详解:多个数据列合并为一列
excel合并两列内容_不要再粘粘粘，合并Excel表格数据，3秒完成
原创作者: 兰色幻想-赵志东转自: Excel精英培训一般情况下,两列数据需要合并,我会推荐用简单的公式: =A2&B2 二般情况下,再连接就不行了,比如C列连接后百分比变成了小数.这时就 ...
mysql 多列合并为一列_多列数据合并一列，还在用数据透视就out了，用=号只要三步完成...
以前我们经常使用Excel表格进行数据分类,比如将多列的数据合并到一列当中,这个时候我们会使用数据透视表.函数等多种方法来操作.今天我们就来学习,如何利用一个=号,快速将多列数据合并为一列. 如上图所 ...
excel合并两列内容_还在为合并WPS表格（Excel）中两列内容而犯愁？此方法简单高效...
我们在处理WPS表格(Excel)数据时,时常需要将两列甚至更多列的内容合并显示在同一列中,就像这样: 这个时候大家是怎么解决的呢? 路人:复制粘贴So easy!小杜:不止两三行啊--路人:复制粘贴 ...

4 合并grid列_Grid教程

4 合并grid列_Grid教程相关推荐

最新文章

热门文章