<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/girdlayout.css">
</head>
<body>
<h1>这是一个关于gridLayout的栗子</h1>
<hr>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>

css:

h1{display: block;text-align:center;}
hr{color: blue; font-size: 12px;}
* {box-sizing: border-box;}
.main {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.main > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: blue;
padding: 1em;
color: red;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
}

一个简单的gridlayout栗子的更多相关文章

  1. 应用OpenMP的一个简单的设计模式

    小喵的唠叨话:最近很久没写博客了,一是因为之前写的LSoftmax后馈一直没有成功,所以在等作者的源码.二是最近没什么想写的东西.前两天,在预处理图片的时候,发现处理200w张图片,跑了一晚上也才处理 ...

  2. 一个简单易用的容器管理平台-Humpback

    什么是Humpback? 在回答这个问题前,我们得先了解下什么的 Docker(哦,现在叫 Moby,文中还是继续称 Docker). 在 Docker-百度百科 中,对 Docker 已经解释得很清 ...

  3. 程序猿修仙之路--数据结构之你是否真的懂数组? c#socket TCP同步网络通信 用lambda表达式树替代反射 ASP.NET MVC如何做一个简单的非法登录拦截

    程序猿修仙之路--数据结构之你是否真的懂数组?   数据结构 但凡IT江湖侠士,算法与数据结构为必修之课.早有前辈已经明确指出:程序=算法+数据结构  .要想在之后的江湖历练中通关,数据结构必不可少. ...

  4. 第四章 .net core做一个简单的登录

    项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...

  5. 哪种缓存效果高?开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  6. 在Openfire上弄一个简单的推送系统

    推送系统 说是推送系统有点大,其实就是一个消息广播功能吧.作用其实也就是由服务端接收到消息然后推送到订阅的客户端. 思路 对于推送最关键的是服务端向客户端发送数据,客户端向服务端订阅自己想要的消息.这 ...

  7. ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  8. 计算机程序的思维逻辑 (60) - 随机读写文件及其应用 - 实现一个简单的KV数据库

    57节介绍了字节流, 58节介绍了字符流,它们都是以流的方式读写文件,流的方式有几个限制: 要么读,要么写,不能同时读和写 不能随机读写,只能从头读到尾,且不能重复读,虽然通过缓冲可以实现部分重读,但 ...

  9. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

随机推荐

  1. Shell脚本的学习笔记一:变量

    三种变量: 局部变量:局部变量在脚本或命令中定义,仅在当前shell实例中有效,其他shell启动的程序不能访问局部变量. 环境变量:所有的程序,包括shell启动的程序,都能访问环境变量,有些程序需 ...

  2. OpenCV学习(一)基础篇

    OpenCV 2 计算机视觉编程手册读书笔记1 矩阵创建 Mat类是OpenCV中非常有用类,用来创建和操作多维矩阵.可以有很多方法构造它. // 构造函数 //! constructs 2D mat ...

  3. makefile简单学习

    前言 在C语言中,我们需要将源代码生成可执行的程序.这里面其实要经过非常多的步骤.参看下图: 这中间主要通过make命令,读取一种名为“makefile”或“Makefile”的文件来实现软件的自动化 ...

  4. 说说VBA中的面向对象

    对象是 Visual Basic 的结构基础,在 Visual Basic 中进行的所有操作几乎都与修改对象有关.Microsoft Word 的任何元素,如文档.表格.段落.书签.域等,都可用 Vi ...

  5. scrapy初探(一)-斗鱼TV直播信息抓取

    由于有相关需求,最近两天开始学了一下scrapy 这次我们就以爬取斗鱼直播间为例,我们准备爬取斗鱼所有的在线直播信息, 包括1.主播昵称 2.直播领域 3.所在页面数 4.直播观看人数 5.直播间ur ...

  6. webapp 安卓 ios 兼容性问题

    1.ios js中时间不兼容YYYY-MM-DD这种格式的时间,只支持YYYY/MM/DD这种格式 // 在safari中new Date('2018-09-02') // Invalid Daten ...

  7. java.lang.ClassNotFoundException的解决方法

    java.lang.ClassNotFoundException的解决方法   出现这个问题的原因可能很多,但是最终原因都是部署的项目文件中没有这个类包. 那么出错的点在哪呢?逐一排除! 1.首先在项 ...

  8. webpack初步学习

    https://segmentfault.com/a/1190000006178770 该篇文章足够webpack入门的学习了,对webpack有个初步的了解和认识.

  9. 微信小程序 | 多个按钮或VIEW,切换状态的简单方法(三元)

    wxml文件 wxss文件 js文件

  10. SQL-存储过程-010

    什么是存储过程? 可以理解为数据库中的方法,与C#中的方法一样,具有参数和返回值: 存储过程的优点? 提高运行速度:存储过程在创造是进行编译,以后运行存储过程都不需要再进行编译,极大化的提高了数据库的 ...