<!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. ace-socket-reconnect

  2. python笔记11-元组

    lis = ['127.0.0.1','3306']#列表tp = ('127.0.0.1','3306') #定义元组 lis[1]='3307'print(lis)print(tp[0])元祖也有 ...

  3. GTS-800二次开发基本流程总结

    1.打开控制器 GT_Open 2.启动伺服使能    GT_ClrSts 3.轴规划位置清零 GT_SetPrfPos 4.轴运动模式 GT_PrfTrap 5.轴目标位置 GT_SetPos 6. ...

  4. Android开发 ---多线程操作：Handler对象，消息队列，异步任务下载

    效果图: 1.activity_main.xml 描述:定义了六个按钮 <?xml version="1.0" encoding="utf-8"?> ...

  5. go 语言如何跨平台编译

    以evio源码的分析来说明: 我们看到在有些文件的头部有这样一个标识:文件链接:https://github.com/tidwall/evio/blob/master/evio_unix.go // ...

  6. Selenium HTMLTestRunner 执行测试成功但无法生成报告

    为什么用PyCharm或者Eclipse执行测试成功但无法生成HTMLTestRunner报告 最近遇到一些人问这样的问题: 他们的代码写的没问题,执行也成功了,但就是无法生成HTMLTestRunn ...

  7. Fibonacci Heaps

    Mergeable heapsA mergeable heap is any data structure that supports the following five operations,in ...

  8. java.lang.ClassNotFoundException:oracle.jdbc.OracleDriver

    在使用JDBC时经常碰到java.lang.ClassNotFoundException:oracle.jdbc.OracleDriver问题 这是jvm找不到驱动类文件,可能是以下原因: 没有导入驱 ...

  9. day07 深浅拷贝

    今日概要 深浅拷贝(重点) 文件操作 详细内容 直接赋值: 直接将对象的引用赋值给另一个对象 v1=1000 v2=v1 #v1 v2指向同一个内存地址 print(id(v1),id(v2))#相等 ...

  10. 文献--A Survey on Server-side Approaches to Securing Web Applications

    Q:1.如何定义XSS攻击? 2.taint-based 啥意思? 3. second-order vulnerabilities 啥意思?