<!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. 自己写的保证js顺序加载的方法

    var arr =["test1.js","test2.js","test3.js"] loadScripts:function(arr){ ...

  2. unity中Event Trigger组件应用代码

    using UnityEngine; using System.Collections; using UnityEngine.Events; using UnityEngine.EventSystem ...

  3. Linux SSH登录很慢的解决方法

    一:UseDNS OpenSSH在用户登录的时候会验证IP,它根据用户的IP使用反向DNS找到主机名,再使用DNS找到IP地址,最后匹配一下登录的IP是否合法.如果客户机的IP没有域名,或者DNS服务 ...

  4. 读取磁盘：LBA方式

    LBA简介 磁盘读取发展 IO操作读取硬盘的三种方式: chs方式 :小于8G (8064MB) LBA28方式:小于137GB LBA48方式:小于144,000,000 GB LBA方式访问使用了 ...

  5. Python开发【项目】：学员管理系统（mysql）

    需求: 用户角色,讲师＼学员, 用户登陆后根据角色不同,能做的事情不同,分别如下 讲师视图: 管理班级,可创建班级,根据学员qq号把学员加入班级 可创建指定班级的上课纪录,注意一节上课纪录对应多条学员 ...

  6. 初见《构建之法》orz……

    作为一个大二的计科狗,还是对软件设计有些懵,尽管之前学习过软件工程,但并没有掌握,突如其来的软件设计实践,让我着实傻眼. 通过消息得知,要学习<构建之法>,就去搜了一下,它是以实践为基础的 ...

  7. Java语法基础学习DaySeventeen（多线程续）

    一.线程的特点 1.线程的分类 java中的线程分为两类:守护线程和用户线程.唯一的区别是判断JVM何时离开. 守护线程是用来服务用户线程的,通过在start()方法前调用Thread.setDaem ...

  8. 第二周例行报告psp

    此作业要求详见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2127 (1)psp表 本周进度条 累计进度图 本周PSP饼状图

  9. Linux：Ubuntu系统的安装

    好久没更了,今天就更完这一期的Linux系统吧,这次主要安装的是常用Linux系统的之一:Ubuntu(乌班图)系统,这个系统和CentOS 7的安装步骤也是类似的,(我不采取用虚拟机的方法来安装,当 ...

  10. 理解微信小程序的生命周期和运行原理

    写微信小程序,他的生命周期不能不知道,不知道小程序就会出现各种bug而无法解决.小助君公众号带你学习小程序的生命周期和运行原理. 小程序由两大线程组成:负责界面的线程(view thread)和服务线 ...