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. .NET并行计算和并发6-获取线程池的最大可用线程数

    using System; using System.IO; using System.Security.Permissions; using System.Threading; class Test ...

  2. Tex_安装_在Ubuntu系统下

    $\LaTeX$是一个强大的排版软件,在数学公式.表格.甚至是科学绘图方面有着独特优势.本文在Ubuntu系统下,整理Tex安装相关的操作,以为备忘.所引链接都未同作者商量,如有不妥望及时告知. 命令 ...

  3. FreeSWITCH部署与功能配置

    一.FreeSWITCH服务部署 1.wget http://www.freeswitch.org.cn/Makefile && make install 2.cd freeswitc ...

  4. web（七）css的语法规则、注释

    css的语法规则:特殊的css语法标识. !important:当使用多种方式设定标签样式时,设定样式渲染的应用优先权,声明在取值之后. .important { color: red !import ...

  5. gitlab 同步小脚本

    gitlab 是公司中的代码仓库,如何保证两台机器同步呢 公司中使用的是docker那么久使用docker进行演示了也方便以后的工作查找资料 附:脚本 #!/bin/bash docker stop ...

  6. linux 创建sudo账号.md

    内容来源自网络 方案一 root登录 ssh root@server_ip_address 新增用户 adduser username 设置密码 passwd username 输入两次密码 修改帐户 ...

  7. centos安装VirtualBox增强包VBoxGuestAdditions

    1.如果你的CentOS 版本早于 6,那么需要在 /etc/grub.conf 中添加一行 divider=10,以将这个参数传递给核心,以减少 idle CPU load.   2.#yum up ...

  8. react 点击空白处隐藏弹出层

    点击空白处隐藏弹出层的原理是:在 document 上绑定事件来隐藏弹出层,这样点击任何元素的时候都会冒泡到 document 上,都会执行隐藏弹出层的功能.然后我们在不需要隐藏弹出层的元素上阻止冒泡 ...

  9. js正则表达式讲的最好的

    https://www.cnblogs.com/chenmeng0818/p/6370819.html

  10. Keepalived+LVS实现高可用负载均衡双主模式

    LVS是一种集群(Cluster)技术:采用IP负载均衡技术和基于内容请求分发技术.调度器具有很好的吞吐率,将请求均衡地转移到不同的服务器上执行,且调度器自动屏蔽掉服务器的故障,从而将一组服务器构成一 ...