Grid教程一

最新推荐文章于 2024-04-12 19:35:58 发布

/*----无忧----*/

最新推荐文章于 2024-04-12 19:35:58 发布

阅读量869

点赞数 4

分类专栏：前端零基础入门文章标签： grid css html 网格布局

本文链接：https://blog.csdn.net/q213546879/article/details/103306368

版权

前端零基础入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
2
评论
Grid教程一

人类计算机技术发展到现在，每天都会有很多新的东西被创造出来，有一些受到了广泛的认可，推广开来。也有一些非常好的点，但是由于各种原因限制，而没有得到广泛的使用。今天要讨论的grid就是其中之一。grid可以说是web布局的最新解决方案，也可以说是目前最好的解决方案。以前我们布局，有一个东西叫做文档流，也就是说我们的页面其实是从上到下从左到右一点一点堆积起来的。不过有了grid之后这个情况将会...
复制链接

扫一扫