<!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. labeled statement：标签语句

    foo: for (var i=0; i< 5; i++) { for (var j=0; j<5; j++) { if ( i == j ) { // 跳到 foo 的下一个循环 // ...

  2. 50个常用的Linux命令（二）sed

    [root@localhost cee]# echo this thisthisthis |sed 's/this/THIS/g'THIS THISTHISTHIS[root@localhost ce ...

  3. Problem F: 平面上的点——Point类 (VI)

    Description 在数学上,平面直角坐标系上的点用X轴和Y轴上的两个坐标值唯一确定.现在我们封装一个“Point类”来实现平面上的点的操作. 根据“append.cc”,完成Point类的构造方 ...

  4. python自学第9天，装饰器

    装饰器:本质是函数(装饰其它函数) 就是为其它函数添加附加功能 原则:1.不能修改被装饰函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即变量 2.高阶函数:a.把一个 ...

  5. 【oracle入门】数据库系统结构----三级模式

    概念模式:概念模式也称模式,是对数据库中全局数据路基结构的描述,是全体用户公共的数据视图.这种描述是抽象描述,不涉及具体硬件环境与平台,也与具有软件环境无关. 外模式:外模式也称子模式或者用户模式,他 ...

  6. 使用元类 编写ORM

    元类 一句话: 元类定制类的创建行为 知识点 1.类的创建: python这种动态语言,函数和类的定义,不是编译时定义的,而是运行时动态创建的. Python解释器遇到class定义时,仅仅是扫描一下 ...

  7. springmvc简单集成shiro

    前言: 有天和同事聊天, 谈起权限管理, 他说他有个同事用shiro用的很溜. 正好现在有个管理平台项目, 有权限控制的需求, 因此想借此机会研究一番. 本文主要简单讲解一下对shiro的一些认识, ...

  8. c++ 网络库

    1.libevent 2.boost::asio 3.ace boost::asio以前看过,不过忘记了 学习,学习

  9. Python全栈之路----函数进阶----迭代器

    我们已经知道,可以直接作用于 for 循环的数据类型有以下几种: 一类是集合数据类型,如 list , tuple , dict , set ,str 等: 一类是 generator ,包括生成器和 ...

  10. Ubuntu16.04交叉工具链安装

    前言: 开发环境是64位的ubuntu16.04,交叉工具链是通过sudo apt-get install ....安装的,移植uboot2014.10,但是很奇怪,按照网上的介绍在start.s里面 ...