12月30日作业：grid布局手写和grid属性实战演示 - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 12月30日作业：grid布局手写和grid属性实战演示

博主信息

博文 145

粉丝 7

访问量 202255

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

12月30日作业：grid布局手写和grid属性实战演示

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰

原创

954人浏览过

作业一：grid代码手写

作业二：通过一个demo.html中两个grid布局，把所学的grid的属性全部演示一遍，同个属性只展示一种效果。
1、demo.html中第一个grid布局
主要展示
（1）grid容器属性：划网格线、网格项目命名、间隙设置、以及项目对其方式和内容对其方式
（2）grid项目属性：项目中某个特定的item的对其方式
2、demo.html中第二个grid布局
主要展示：
（1）grid容器属性：划网格线、网格项目命名、以及项目和内容（item）对其方式、隐式网格的宽高、网格项目流动方向
（2）grid项目属性：网格命名定位、网格线定位
3、实战演示代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12月30日作业</title>
    <style>
        * :not(body){
            outline: 1px dashed blue;
        }
        body {
            width: 1200px;
            min-height: 1000px;
            margin: 0 auto;
        }
        /*grid容器属性：*/
        .contraption1 {
            /*网格基本布局：划网格线，网格项目命名，设置网格间隙*/
            width: 1000px;
            height: 1000px;
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows:repeat(3,200px);
            /*grid-column-gap:10px;*/
            /*grid-row-gap:15px;*/
            grid-gap:15px 10px;
            /*grid-gap:row column;   */
            grid-template-areas:'one two three' 'four five six' 'seven eight nine';
            /*网格布局项目对其方式*/
            /*justify-content: end;*/
            /*align-content:center;*/
            place-content:  end  end ;
            /*place-content: align justify ;*/
            /*项目内容对其方式*/
            /*justify-items:end;*/
            /*align-items:center;*/
            place-items:center end ;
            /*place-items:align  justify;*/
        }
        .item {
            width: 150px;
            height: 150px;
            text-align: center;
            line-height: 150px;
            background-color: #ff0000;
        }
        /*设置网格容器中某个特定项目的对其方式*/
        .contraption1 > :nth-child(3) {
            /*justify-self: center;*/
            /*align-self: end ;*/
            place-self:start start;
            background-color: #55a532;
        }
        .contraption2 {
            width: 1000px;
            height: 1000px;
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows:repeat(3,200px);
            grid-template-areas:'one one three' 'four five six' 'seven eight nine';
            /*隐式网格李宽和高*/
            grid-auto-columns:150px;
            grid-auto-rows:150px;
            /*网格容器和内容对其方式：*/
            justify-content: center;
            align-content: center;
            place-items:center center;
            /*网格中项目流动方向：默认值：row*/
            grid-auto-flow:column;
        }
        .contraption2 > :first-child {
            /*通过网格命名定位网格区域*/
            grid-area:one;
        }
        .contraption2 > :nth-child(3) {
            /*通过网格线定位网格区域*/
            /*grid-row-start:2;*/
            /*grid-row-end:4;*/
            /*grid-column-start:1;*/
            /*grid-column-end:2;*/
            grid-area: 2/1/4/2;
        }
    </style>
</head>
<body>
<div class="contraption1">
    <div class="item"><span>第1个项目</span></div>
    <div class="item"><span>第2个项目</span></div>
    <div class="item"><span>第3个项目</span></div>
    <div class="item"><span>第4个项目</span></div>
    <div class="item"><span>第5个项目</span></div>
    <div class="item"><span>第6个项目</span></div>
    <div class="item"><span>第7个项目</span></div>
    <div class="item"><span>第8个项目</span></div>
    <div class="item"><span>第9个项目</span></div>
</div>
<hr>
<h1>两个案例，不同属性值展示</h1>
<hr>
<div class="contraption2">
    <div class="item"><span>第1个项目</span></div>
    <div class="item"><span>第2个项目</span></div>
    <div class="item"><span>第3个项目</span></div>
    <div class="item"><span>第4个项目</span></div>
    <div class="item"><span>第5个项目</span></div>
    <div class="item"><span>第6个项目</span></div>
    <div class="item"><span>第7个项目</span></div>
    <div class="item"><span>第8个项目</span></div>
    <div class="item"><span>第9个项目</span></div>
</div>
</body>
</html>

4、实战演示效果展示：（在火狐浏览器下展示，并标注网格线）

总结：
1、grid网格布局适合大布局和整体布局
2、grid整体思路，划网格线——项目定位（网格线和网格域）——项目对其方式——内容在项目中对其方式——单个项目内容对齐调整
3、项目流动方向对隐式项目宽高的影响：
（1）自然方向流动（row）-宽度随网格布局大小，高度可自行设置
（2）column流动方向-高度随网格布局大小，宽度可自行设置
4、place-self优先place-items属性显示