<!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. 本地jar包安装到本地仓库

    将本地jar包安装到本地仓库中,记得参数上有双引号 mvn install:install-file -Dfile="jar全路径" -DgroupId="groupId ...

  2. <zk在大型分布式系统中的应用>

    Hadoop 在hadoop中,zk主要用来实现HA(High Availability).这部分逻辑主要集中在hadoop common的HA模块中,HDFS的NameNode和Yarn的Resou ...

  3. guava-retrying 源码解析（阻塞策略详解）

    这是一种策略,用于决定重试者应如何在重试尝试之间进行阻止.通常这只是一个thread.sleep(),但是如果需要的话,实现可能更复杂. 一.阻塞策略相关的类或接口 1.阻塞策略接口:BlockStr ...

  4. pip3 install mysqlclient 报错 “/bin/sh: 1: mysql_config: not found”的解决方法

    执行 sudo apt-get install libmysqlclient-dev, 然后执行 pip3 install mysqlclient 成功.

  5. Flask+uwsgi+virtualenv环境配置

    Linux系统版本: SLES12sp3 (阿里云) 1. 首先需要安装python-devel,否则后续安装会报错! rpm -qa|grep python-base 结果: python-base ...

  6. Web服务器之Nginx详解（理论部分）

    大纲 一.前言 二.Web服务器提供服务的方式 三.多进程.多线程.异步模式的对比 四.Web 服务请求过程 五.Linux I/O 模型 六.Linux I/O 模型具体说明 七.Linux I/O ...

  7. 2018.4.26 lvm

    lvm(Logical Volume Manager)逻辑卷管理,是Linux环境下对磁盘分区进行管理的一种机制. 基本概念: 1. 物理卷-----PV(Physical Volume)物理卷在逻辑 ...

  8. （27）session（设置值、取值、修改、删除）

    session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要有一种新的东西, ...

  9. CodeForces - 13E

    Little Petya likes to play a lot. Most of all he likes to play a game «Holes». This is a game for on ...

  10. Anaconda安装python(idea兼容)

    官方网站www.anaconda.com 1 Windos安装 一路下一步,注意添加环境变量 成功过后,测试一下,打开cmd命令行 2 Linux安装 下载完成后上传到linux bash Anaco ...