网格布局中 grid-template

最新推荐文章于 2024-04-27 13:18:18 发布

背太阳的牧羊人

最新推荐文章于 2024-04-27 13:18:18 发布

阅读量3.1k

点赞数 1

分类专栏： CSS 文章标签： grid-template

本文链接：https://blog.csdn.net/u013565133/article/details/102914359

版权

CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

grid-template

是 grid-template-areas， grid-template-rows 和 grid-template-columns 三个属性的简写，用以定义网格中的分区、行和列。

取值：

none：将 grid-template-rows , grid-template-columns , grid-template-areas 三个属性设置为关键字 none，意味着没有明确的网格，没有命名的网格区域。行和列将隐式生成, 他们的大小将由 grid-auto-rows 和 grid-auto-columns 属性决定。
```
/* Keyword value */
grid-template: none;
```
< grid-template-rows > / < grid-template-columns >：设置 grid-template-rows 和 grid-template-columns 指定的值，并设置 grid-template-areas 为 none 。
[ < line-names >? < string > < track-size >? < line-names >? ] + [ / < explicit-track-list > ]?：< line-names >是网格名称， < string >是 grid-template-areas的名称，< track-size > 是 grid-template-rows的值（无具体的值则设置成 auto ），然后按这种方式依次拼接。/ 后的 < explicit-track-list > 是 grid-template-columns 的值。
```
grid-template: [header-left] "head head" 30px [header-right]
               [main-left]   "nav  main" 1fr  [main-right]
               [footer-left] "nav  foot" 30px [footer-right]
	           / 120px 1fr;
```

上面代码将创建第一行的高度是30px ,第三行的高度是30px,中间行的高度填满剩余的高度；第一列宽度120px，剩下宽度填满剩余的列（第二列）。
举例：

html部分：

<div class="container">
        <header>Header</header>
        <nav>Nav</nav>
        <main>Main area</main>
        <footer>Footer</footer>
 </div>

css关键代码：

      .container {
           display: grid;
           height: 100vh;
           grid-template:
               [header-left] "head head" 50px [header-right]
               [main-left] "nav main" 1fr [main-right]
               [footer-left] "nav foot" 150px [footer-right]
                / 180px 1fr;
       }

       header {
           grid-area: head;
       }

       nav {
           grid-area: nav;
       }

       main {
           grid-area: main;
       }

       footer {
           grid-column: foot;
       }

最终效果：
在这里插入图片描述
所有代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 28px;
            color: #fff;
        }

        .container {
            display: grid;
            height: 100vh;
            grid-template:
                [header-left] "head head" 50px [header-right] [main-left] "nav main" 1fr [main-right]
                [footer-left] "nav foot" 150px [footer-right]
                 / 180px 1fr;
        }

        header {
            background-color: hotpink;
            grid-area: head;
        }

        nav {
            background-color: seagreen;
            grid-area: nav;
        }

        main {
            background-color: darkorange;
            grid-area: main;
        }

        footer {
            background-color: lightblue;
            grid-column: foot;
        }
    </style>
</head>

<body>
    <div class="container">
        <header>Header ( 高50px ) </header>
        <nav>Nav </br>( 高1fr )</br>( 宽 180px ) </nav>
        <main>Main area( 高1fr , 宽1fr) </main>
        <footer>Footer ( 高150px ) </footer>
    </div>
</body>

</html>

背太阳的牧羊人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网格布局中 grid-template

grid-template是 grid-template-areas， grid-template-rows 和 grid-template-columns 三个属性的简写，用以定义网格中的分区、行和列。取值：none：将 grid-template-rows , grid-template-columns , grid-template-areas 三个属性设置为关键字 no...
复制链接

扫一扫