接外包,有相关需求的可以联系我:Telegram | Email

CSS 之Grid布局

该文章创建(更新)于09/20/2020,请注意文章的时效性!

缘由

最近准备把自己博客主题的Boostrap的那一套给替换掉了!关键是由于自带的布局在Ipad上面会出现严重的变形!干扰正常的阅读!自己在布局方面想的So easy了!刚开始以为是哪一个代码没敲给弄错乱码了,后续不断试错才发现是CSS布局的问题!后来不断在互联网遨游发现了 CSS Grid布局这东西,感觉以后布局有的解了!一个字叫:爽!

简介

我这里说一个响应式布局完整示例,其它具体详情就没必要了!可以去看参考!

html

我们需要的第一件事是一点 HTML 。 一个网格容器(将变成一个网格元素)和网格项(header, menu, content, footer)。

<div class="container">
    <div class="header">HEADER</div>
    <div class="menu">MENU</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</div>

css

那么我们需要在 container 元素设置 display: grid; ,将其设置为网格容器,并指定我们需要多少行和列。这是基本的CSS:

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
}

以上代码的意思是:使用 grid-template-columns 属性创建一个 12 列的网格,每个列都是一个单位宽度(总宽度的 1/12 )。(注:其中, repeat(12, 1fr) 意思是 12 个重复的 1fr 值。 fr 是网格容器剩余空间的等分单位。)使用 grid-template-rows 属性创建 3 行,第一行高度是 50px ,第二行高度是 350px 和第三行高度是 50px。最后,使用 grid-gap 属性在网格中的网格项之间添加一个间隙。

添加 grid-template-areas

这个属性被称为网格区域,也叫模板区域,能够让我们轻松地进行布局实验。

要将它添加到网格中,我们只需给网格容器加一个 grid-template-areas 属性即可。 语法可能有点奇怪,因为它不像其他的 CSS 语法。例如:

.container {
    display: grid;
    grid-gap: 5px;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-template-areas:
        "h h h h h h h h h h h h"
        "m m c c c c c c c c c c"
        "f f f f f f f f f f f f";
}

grid-template-areas 属性背后的逻辑是你在代码中创建的网格可视化表示。正如你所看到的,它有 3 行 12 列,和我们在 grid-template-columns 和 grid-template-rows 中定义的正好呼应。

每行代表一行,用网格术语来说是 网格轨道(Grid Track) ,每个字符( h,m,c,f)代表一个网格单元格。注:其实是 网格区域(Grid Area) 名称,你可以使用任意名称。

四个字母中的每一个现在都形成一个矩形 grid-area 。

你可能已经猜到,我选择了字符 h,m,c,f,是因为他们是 header, menu, content 和 footer 的首字母。 当然,我可以把它们叫做任何想要的名称,但是使用他们所描述的东西的第一个字符更加容易让人理解。

  • 以下就是完整布局

给网格项设定网格区域名称( grid-area)

现在我们需要将这些字符与网格中的网格项建立对应的连接。 要做到这一点,我们将在网格项使用 grid-area 属性:

.header {
    grid-area: h;
}
.menu {
    grid-area: m;
}
.content {
    grid-area: c;
}
.footer {
    grid-area: f;
}

尝试其他布局

现在,我们开始讨论 Grid(网格) 布局 特性的精妙之处,因为我们可以很容易地对布局进行修改尝试。只需修改 grid-template-areas 属性的字符即可。举个例子,把 menu 移到右边:

grid-template-areas:
    "h h h h h h h h h h h h"
    "c c c c c c c c c c m m"
    "f f f f f f f f f f f f";
  • 修改后的效果

  • 我们可以使用点 . 来创建空白的网格单元格。
grid-template-areas:
    ". h h h h h h h h h h ."
    "c c c c c c c c c c m m"
    ". f f f f f f f f f f .";

响应式布局完整示例

可跳转到http://js.jirengu.com/wizajadegu/1/edit?html,css,output测试该用例!注意可能会被人改变!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
        <title>JS Bin</title>
        <style>
            .container {
            display: grid;
            grid-gap: 5px;    
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px 350px 50px;
            grid-template-areas:
                "h h h h h h h h h h h h"
                "c c c c c c c c c c m m"
                "f f f f f f f f f f f f";
        }

        .header {
            grid-area: h;
            color:red;
            background-color:green;
        }
        .menu {
            grid-area: m;
            color:orange;
            background-color:lightgreen;
        }
        .content {
            grid-area: c;
            color:blue;
            background-color:orange;
        }
        .footer {
            grid-area: f;
            color:red;
            background-color:blue;
        }

        @media screen and (max-width: 640px) {
            .container {
                grid-template-areas:
                    "h h h h h h h h h h h h"
                    "c c c c c c c c c c c c"
                    "m m m m m m m m m m m m"
                    "f f f f f f f f f f f f";
            }
        }
        </style>
    </head>
<body>
<div class="container">
  <div class="header">HEADER</div>
  <div class="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>
</body>
</html>

浏览器兼容(未测试过)

参考


要不赞赏一下?

微信
支付宝
PayPal
Bitcoin

版权声明 | Copyright

除非特别说明,本博客所有作品均采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。转载请注明转自-
https://www.emperinter.info/2020/09/20/grid-layout-in-css/


要不聊聊?

我相信你准备留下的内容是经过思考的!【勾选防爬虫,未勾选无法留言】

*

*



微信公众号

优惠码

阿里云国际版20美元
Vultr10美元
搬瓦工 | Bandwagon应该有折扣吧?
域名 | namesiloemperinter(1美元)