构造一个5*5的网格，如下图所示，同一颜色表示同个区域，黑线表示间隔5px

1.普通方式建立网格

<!DOCTYPE html>

<html>

<body>

<style>

  .d1{

        background: skyblue;

        /* justify-self和align-self都是调整子元素内部内容的（start,end,center）

        justify-self: center;

        align-self: end;

        */

        /* grid-row: （从上往下）第一条线 / 最后一条线

           grid-column： （从左往右）第一条线 / 最后一条线 */

        grid-row: 1/6;

        grid-column: 1/2;

    }

  .d2{

        background:green;

        grid-row: 1/2;

        grid-column: 2/6;

     }

  .d3{

        background:red;

        grid-row:2 / 5;

        grid-column:2 / 4;

    }

  .d4{

        background: yellow;

        grid-row: 2 / 6;

        grid-column: 4 / 6;

    }

  .d5{

        background:black;

        color: white;

        grid-row: 5 / 6;

        grid-column: 2 / 4;

    }

  .container {

    font-size: 40px;

    width: 300px;

    margin: auto;

    background: white;

    /* 表示该父元素下应用网格 */

    display: grid;

    grid-template-rows: 1fr 1fr 1fr 50px auto;

    grid-template-columns: 50px 50px 50px 50px 50px;

    /*

    行间隔：grid-row-gap: 5px;

    列间隔：grid-column-gap: 5px;

    */

    /* 行+列间隔5px */

    grid-gap: 5px;

    /* justfy-items和align-items,所有子元素横纵向对齐（start,end,center）

    justfy-items: center;

    align-items: end;

    */

  }

</style>

<div class="container">

  <div class="d1">1</div>

  <div class="d2">2</div>

  <div class="d3">3</div>

  <div class="d4">4</div>

  <div class="d5">5</div>

</div>

</body>

</html>

2.使用区域模板划分网格

<!DOCTYPE html>

<html>

<body>

<style>

  .d1{

        background: skyblue;

        grid-area: blue;

    }

  .d2{

        background:green;

        grid-area: green;

     }

  .d3{

        background:red;

        grid-area: red;

    }

  .d4{

        background: yellow;

        grid-area: yellow;

    }

  .d5{

        background:black;

        color: white;

        grid-area: black;

    }

  .container {

    font-size: 40px;

    width: 300px;

    margin: auto;

    background: white;

    /* 表示该父元素下应用网格 */

    display: grid;

    /* 设置网格模板 **-rows:行数，**-columns：列数 */

    /* 五个自适应行 repeat代表重复 */

    grid-template-rows: repeat(5,1fr);

    /* 填充20-50px的方块到列 */

    grid-template-columns: repeat(auto-fit, minmax(20px, 50px));

    grid-gap: 5px;

    grid-template-areas:

    "blue green green green green"

    "blue red red yellow yellow"

    "blue red red yellow yellow"

    "blue red red yellow yellow"

    "blue black black yellow yellow";

  }

</style>

<div class="container">

  <div class="d1">1</div>

  <div class="d2">2</div>

  <div class="d3">3</div>

  <div class="d4">4</div>

  <div class="d5">5</div>

</div>

</body>

</html>

七、CSS网格的更多相关文章

  1. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  2. 【图片版】学习CSS网格布局

    简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...

  3. CSS 网格布局学习

    转自:https://blog.jirengu.com/?p=990 CSS网格布局(又名“网格”)是一个二维的基于网格的布局系统,其目的只在于完全改变我们设计基于网格的用户界面的方式. CSS一直用 ...

  4. 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等

    1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. css 网格布局

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  6. 七. CSS字体

    概述 所谓字体:即文字的形体结构,根据外观字体分不同的类别:衬线字体Serif.无衬线字体sans-serif和等宽字体monospace.每一个类别的字体又可以分成不同的字体族font family ...

  7. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  8. css 网格布局简单应用

    将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器,所有容器直接子结点自动成为网格项目. grid :网格项目按行排列,网格项目占用整个容器的宽度. inlin ...

  9. WEB入门.七 CSS布局模型

    学习内容 标准文档流 流动模型(flow model) 浮动模型(float model) CSS基本布局 能力目标 理解标准文档流 使用流动模型实现页面布局 使用浮动模型实现页面布局 掌握常用CSS ...

  10. css网格布局

    先来一段基本布局 <!doctype html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. MVC页面加载速度优化小记

     前言: 最近做一个地图展示页面,业务初期没什么问题,运行一阵后报错: Error during serialization or deserialization using the JSON Jav ...

  2. mysql8 更改root密码(windows)

    1.停止服务 net stop mysql; 2.控制台输入 mysqld --console --shared-memory --skip-grant-tables 3.重新打开一个窗口,进入bin ...

  3. 实战记录在 Linux Ubuntu 20.04 安装VNC 远程桌面

    Virtual Network Computing (VNC),是一个图形桌面共享系统,允许我们像使用Windows桌面系统一样可视化的使用键盘和鼠标远程控制服务器,当做一台远程的电脑一样. 主要用在 ...

  4. SAP生产订单没有目标成本的原因解释

    首先,OKV6察看一下目标成本的配置,默认是当期成本估算,见下图: 其次,没有目标成本的原因还可能是下列原因导致: 1.该物料没有成本估算和发布2.工艺路线维护日期晚于这个物料估算日期3.没有做CO1 ...

  5. CF1528D It's a bird! No, it's a plane! No, it's AaParsa!

    个人思路: floyd 求最短路,\(\Theta(n^3)\) 不能维护边的变化. 然后就不会做了. 正解: 首先,对于每个起始点,到达一个点 \(v\) 越早越好,因为可以等待. 边的变化相当于每 ...

  6. vue axios传值到后端报错问题

    原因:axios使用post方法传输数据给后端默认为json格式,会导致跨域问题 原理:qs是查询字符串解析和将对象序列化的库 qs.stringify()   将对象序列化成url的形式,以& ...

  7. 在子组件中使用$parent获取不到父组件里的变量值?

    一直用的都是this.$parent来取父组件的值,现在发现,element-UI内的组件,也是一层父组件 例如 父组件内 子组件内   console.log 打印结果

  8. keil 常用调试方法

    1.内存调试方法, 参考链接: https://blog.51cto.com/u_4029519/5423341 2.汇编调试方法 常用到bootlader和应用程序的调试 1.生成bin文件.汇编文 ...

  9. [jQuery]z-index属性大于0的元素使用fadeIn无法正常过渡的问题

    rt 问题记录. 尝试使用$('    ').animate({ opacity: 1 }) 会出现相同的问题. 可能是opacity动画与z-index无法兼容(?) 最后的处理方式是改变元素渲染顺 ...

  10. mac新仙剑奇侠传 2018

    新仙剑奇侠传 201803重制 下载,挂载后,拖动app到applications应用程序 文件夹即可. https://590m.com/f/28636472-500476381-5c8846 (访 ...