效果图如上所示

<!DOCTYPE html>

<html>

<head>

    <title>练习</title>

</head>

<body>

<link rel="stylesheet" type="text/css" href="file:///D:/Sublime%20Text%203/Sublime%20Text%203/%E4%BB%A3%E7%A0%81/Css%E5%AE%9E%E9%AA%8C">

<div class="container">

  <div class="one">One</div>

  <div class="two">Two</div>

  <div class="three">Three</div>

  <div class="four">Four</div>

  <div class="five">Five</div>

  <div class="six">Six</div>

</div>

</body>

</html>
.container{

   display: grid;

  grid-template-columns: 60px 60px 60px;

  grid-auto-rows: 60px 60px 60px 60px;

  background: pink;

  color: purple;

}

.one{

  grid-column-start:;

  grid-row-start:;

  grid-row-end:;

  grid-column-end:;

  background: orange;

}

.two{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: green;

}

.three{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: black;

}

.four{

  grid-column-start:;

  grid-row-start:;

  grid-row-end:;

  grid-column-end:;

  background: yellow;

  }

.five{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background: red;

  }

.six{

  grid-column-start:;

  grid-row-start:;

  grid-column-end:;

  grid-row-end:;

  background:blue;

  }

CSS Grid的更多相关文章

  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 ...

  10. css grid 网格布局

    前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...

随机推荐

  1. windows shell命令相关

    一 系统自带的命令 1 创建文件夹 mkdir 文件夹名 2 强制删除文件夹 rd/s/q 文件夹名 3 强制删除文件 del/f/s/q 文件名 4 移动文件到文件夹 move 文件名 文件夹名 二 ...

  2. 涂抹mysql笔记-数据备份和恢复

    <>物理备份和逻辑备份<>联机备份和脱机备份<>本地备份和远程备份<>完整备份和增量备份<>完整恢复和增量恢复<>复制表相关文件 ...

  3. 一、CSS介绍

    CSS介绍 1.css概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 selector{ property:value } 注:property(属性)大于1之后,property之间用 ...

  4. JavaSE中的小知识点分析

    1.System.out.println(); 调用System类中的public static final PrintStream out,输出为PrintStream(字节形式的输出流,为Outp ...

  5. Hive表种map字段的查询取用

    建表可以用 map<string,string> 查询时可以按照 aaa[bbb], aaa 是map字段名,bbb是其中的参数名,就可以取到这个参数的值了 当参数名bbb是string时 ...

  6. leetcode236

    class Solution { public: TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, TreeNode* q) { ...

  7. vmware 里MAC 鼠标能移动 无法单击

    vmware 里MAC  鼠标能移动 无法单击 移动有效果,能看到鼠标移动的光标,鼠标放到mac的图标上还有提示,就是无法单击. 键盘正常. 重启mac,重启vmware 20次好了,2小时.

  8. ubuntu16下用QT5实现对话框应用

    ubuntu16下用QT5,实现对话框程序,步骤:生成界面Dialog.ui,将它应用到主程序,通过主程序显示. 一 界面练习 1 Dialog.ui界面生成 在命令行输入:designer 进入界面 ...

  9. [phvia/firman] PHP多进程服务器模型中的惊群

    [ 典型场景 ] 典型的多进程服务器模型是这样的,主进程绑定ip,监听port,fork几个子进程,子进程安装信号处理器,随后轮询资源描述符检查是否可读可写: 子进程的轮询又涉及到 IO复用,acce ...

  10. spring @transactional 注解事务

    1.在spring配置文件中引入<tx:>命名空间 <beans xmlns="http://www.springframework.org/schema/beans&qu ...