美文网首页
CSS+HTML<网格布局grid>

CSS+HTML<网格布局grid>

作者: 誰在花里胡哨 | 来源:发表于2021-01-25 17:59 被阅读0次
image.png
你可能会问网格布局可以干什么,我这里简单的了解了一下。发现类似计算器,键盘的排版都是可以用网格布局的,而且在项目开发中的一些商品布局或者文章布局等,也是可以用的。但是也要看你的熟练度了,我之前多用的是弹性布局display:flex,了解过网格布局 display:grid后,发现有些东西用起来还是用后者要方便很多,但是具体也没用过,不敢说有没有一些坑位~~
但是多多益善,知道的多,日后必能派上用场,这里为大家提供一些相关学习网格布局的网站,也可以直接通过我这边代码的注释,直接去理解

学习素材:
CSS3中的display:grid网格布局介绍
CSS grid-area属性

代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: grid;
            /* 1ch 等于一个 0 的宽度 */
            /* 1ch = 1个英文 = 1个数字 */
            /* 2ch = 1个中文 */
            /* auto-fill;
            如果容器大小不固定,项目大小固定,可以用auto-fill关键字自动填充; */
            /* 列 自动填充列,每列为30个字符宽度 */
            grid-template-columns: repeat(auto-fit, 30ch);
            place-content: center;
            /* 每个网格的间距为 5vh */
            grid-gap: 5vh;
            margin-left: auto;
            margin-right: auto;
            padding: 1rem;
        }

        #template {
            background: #fff;
            padding: 1rem;
            border-radius: 7px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
            /* height: 25vh; */
            /* 网格布局 */
            display: grid;
            /* grid-gap:20px 20px; */
            /* row-gap和column-gap简写形式;行间距和列间距 */
            grid-gap: 0.5rem;
        }

        .col {
            background-color: #7B86F5;
            border-radius: 4px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 1.5rem;
        }

        .template-2col {
            /* 重复写值很麻烦,可以用repeate函数;
         repeat(次数,大小);
         例如:repeat(3,100px); //重复3次,每次100px;
            */
            /* 2列,每列为1等分 */
            grid-template-columns: repeat(2, 1fr);
        }

        .template-3col {
            /* 3列,每列为1等分 */
            grid-template-columns: repeat(3, 1fr);
        }

        .template-4col {
            /* 2行 每行1等分/2列 每列1等分 */
            grid-template: repeat(2, 1fr)/repeat(2, 1fr);
        }

        .template-5col {
            /* 区域划分 2行2列 */
            grid-template: "sidebar mainA""sidebar mainB";
            /* 1列最小为100px最大为1等分  2列为1等分*/
            grid-template-columns: minmax(100px, 1fr) 1fr;
        }

        .template-5col .left {
            overflow: hidden;
            /* 区域划分 left占 sidebar 位*/
            grid-area: sidebar;
        }

        .template-5col .left img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .template-6col {
            grid-template: "mainA sidebar""mainB sidebar";
        }

        .template-6col .right {
            grid-area: sidebar;
        }

        .template-7col {
            /* 3行 每行1等分/3列 每列1等分 */
            grid-template: repeat(3, 1fr)/repeat(3, 1fr);
        }

        .template-8col {
            /* 3行 每行1等分/3列 每列1等分 */
            grid-template: repeat(3, 1fr)/repeat(3, 1fr);
            /* 网格排列方式 默认row:水平排列  column:垂直排列  */
            grid-auto-flow: column;
        }

        .template-9col {
            grid-template: repeat(3, 1fr)/repeat(3, 1fr);
        }

        .template-9col .col:nth-child(1) {
            /* 从第1行和第1列开始,跨越1行3列 */
            grid-area: 1/1/span 1/span 3;
        }
        .template-9col .col:nth-child(3) {
            /* 从第2行和第2列开始,跨越2行2列 */
            grid-area: 2/2/span 2/span 2;
        }
        .template-9col .col:nth-child(5) {
            /* 从第1行和第1列开始,跨越1行3列 */
            grid-area: 4/1/span 2/span 1;
        }
    </style>
</head>

<body>
    <div id="template" class="template-1col">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>
    <div id="template" class="template-2col">
        <div class="col">1</div>
        <div class="col">2</div>
    </div>
    <div id="template" class="template-3col">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    <div id="template" class="template-4col">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
    </div>
    <div id="template" class="template-5col">
        <div class="col left">
            1
            <!-- <img src="./pexels-pixabay-355747.png" alt=""> -->
        </div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    <div id="template" class="template-6col">
        <div class="col right">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    <div id="template" class="template-7col">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
    </div>
    <div id="template" class="template-8col">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
    </div>
    <div id="template" class="template-9col">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
    </div>
</body>

</html>

相关文章

  • CSS+HTML<网格布局grid>

    你可能会问 可以干什么,我这里简单的了解了一下。发现类似 , 的排版都是可以用 的,而且在项目开发中的一些商品布局...

  • Grid网格布局学习

    Grid网格布局学习 引言 本文不对grid布局由来以及优劣做过多的介绍,仅介绍grid网格布局的用法及其效果显示...

  • CSS Grid网格布局

    参考资料 CSS Grid 网格布局教程 - 阮一峰 概述 网格布局(Grid)是最强大的 CSS 布局方案。 它...

  • Grid布局

    CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变...

  • CSS Grid 布局

    CSS Grid(网格) 布局(又称为 “Grid(网格)” ),是一个二维的基于网格的布局系统它的目标是完全改变...

  • CSS Grid 网格布局

    CSS Grid 网格布局教程

  • [CSS]之Grid布局

    网格布局(Grid)将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局 一、Grid布局与Flex...

  • grid布局

    一、容器属性:display:grid ;网格布局display:inline-grid ;行内 // 网格列宽g...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

  • 九宫格拖拽

    效果实例 简单了解Grid布局(网格布局) 什么是网格布局 CSS网格布局(又称“网格”),是一种二维网格布局系统...

网友评论

      本文标题:CSS+HTML<网格布局grid>

      本文链接:https://www.haomeiwen.com/subject/kgjizktx.html