The web homework:

Finished design：

(I use six block with different color to show this homework and I put the web's code below there)

HTML:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>practise</title>

     <link rel="stylesheet" href="practise.css">

 </head>

 <body>

     <div>

         <div class="wrapper">

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

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

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

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

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

         <div class="item6">6</div>

     </div>

 </body>

 </html>

CSS:

.wrapper {

  display:grid;

  grid-template-columns: 80px 80px 80px;

  grid-template-rows: 80px 80px 80px 80px;

}

.item1{

    background: red;

    grid-area: 1/1/2/4;

}

.item2{

    background: green;

    grid-area: 2/1/5/2;

}

.item3{

    background: blue;

    grid-area: 2/2/3/3;

}

.item4{

    background: black;

    grid-area: 3/2/4/3;

    color: white;

}

.item5{

    background: yellow;

    grid-area: 4/2/5/3;

}

.item6{

    background: pink;

    grid-area: 2/3/5/4;

}

Finally, put up a simple and exhaustive website about CSS :    https://blog.csdn.net/hj7jay/article/details/70670467

CSS: Grid homework redact.的更多相关文章

  1. CSS Grid layout布局

    CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.你只需要定义一个容器元素并设置display:grid,使用gr ...

  2. 各个浏览器开启CSS Grid Layout的方式

    2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...

  3. 如何使用Flexbox和CSS Grid，实现高效布局

    CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来 ...

  4. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  5. CSS Grid 布局完全指南(图解 Grid 详细教程)

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  6. 快速使用CSS Grid布局，实现响应式设计

    常用Grid布局属性介绍 下面从一个简单Grid布局例子说起. CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素). wrapper 是实际的 grid(网格 ...

  7. CSS Grid 读书笔记

    基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...

  8. CSS Grid 布局

    CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就意味着它可以同时处理列和行.通过将 CSS 规则应用于 父元 ...

  9. css - Grid网格布局

    .wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 1 ...

随机推荐

  1. OLAP了解与OLAP引擎——Mondrian入门

    一.  OLAP的基本概念 OLAP(On-Line Analysis Processing)在线分析处理是一种共享多维信息的快速分析技术:OLAP利用多维数据库技术使用户从不同角度观察数据:OLAP ...

  2. JS的异步操作

    异步操作: 1.定时器都是异步操作 2.事件绑定都是异步操作 3.AJAX中一般我们都采用异步操作 4.回调函数可以理解为异步 同步:一次只能完成一个任务,如果多个任务就必须排队,先前面一个任务再执行 ...

  3. ecmall 学习记录3

    1.在ecmall.php 中 336行有一个函数 function lang_file($file) { return ROOT_PATH . '/languages/' . LANG . '/' ...

  4. 【转】20-TCP 协议（滑动窗口——基础）

    https://blog.csdn.net/q1007729991/article/details/70142341 相信大家都遇到过这样的场景: 同学 Luffy 给你打电话,让你记下一串手机号码, ...

  5. Codeforces1062D. Fun with Integers（埃氏筛）

    题目链接:传送门 题目: D. Fun with Integers time limit per test seconds memory limit per test megabytes input ...

  6. 【java多线程】队列系统之LinkedBlockingDeque源码

    1.简介 上一篇我们介绍了 LinkedBlockingDeque 的兄弟篇 LinkedBlockingQueue .听名字也知道一个实现了 Queue 接口,一个实现了 Deque 接口,由于 D ...

  7. oracle-taf

    http://blog.sina.com.cn/s/blog_48567d850102wck0.html配置目标:把RAC系统配置为“主-备”模式,即平时所有连接都在rac01这个节点上,当rac01 ...

  8. Dynamics CRM Publisher

    如果你想创建并且部署一个solution(解决方案),你需要创建一个publisher. 当准备创建一个solution并且创建entity field, relationship在这个solutio ...

  9. lsof一些使用

    查看某进程和哪些文件相关 [root@linux-node2 ~]# netstat -lntp Active Internet connections (only servers) Proto Re ...

  10. AIUI开放平台：多轮对话返回前几轮语槽数据

    编写云函数: AIUI.create("v2", function(aiui, err){ // 获取 response response = aiui.getResponse() ...