<!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. UDP协议学习(转)

    reference: https://blog.csdn.net/s_lisheng/article/details/73538229                  https://blog.cs ...

  2. python第三方库函数安装

    以安装pillow库为例 第一.在cmd环境中安装. 第二.输入pip -h(注意之间有个空格),会出现下图界面. 第三.输入pip install pillow,就会自动安装第三方库. 注意:这里面 ...

  3. IntelliJ IDEA使用教程（很全）

    IntelliJ IDEA使用教程(很全) 这个编辑器我就不再多做介绍了.直接开始新建maven hello world 的Java web项目啦 你电脑上得有jdk1.7,或者1.8,然后就是mav ...

  4. wc语法

    统计当前目录下的所有文件行数: wc -l * 当前目录以及子目录的所有文件行数: find  . * | xargs wc -l 可以把*改成所要匹配的文件,例如Java文件,*.java这样就只统 ...

  5. Java学习笔记34（sql基础 ：增删改查1）

    create database qy97;/*创建数据库*/ use qy97; /*使用数据库 use 数据库名*/ show tables; /*查看所有的表*/ select database( ...

  6. 【linux基础】关于ARM板子使用O3编译选项优化

    前言 应领导要求需要将最初级版本的算法移植到ARM板子上,并进行优化,以期达到实时. 平台 移植前: TX2 移植后: ARM() processor : model name : ARMv7 Pro ...

  7. Linux命令学习之路-文档浏览之less

    使用权限:所有角色 使用方式:less [ options ] filename 作用:文档内容浏览,可向前或者向后浏览文档内容 注意点: 1.less 命令和 more 命令的作用大致相同,less ...

  8. 安装Vmware workstation虚拟机软件

    运行下载完成的Vmware Workstation虚拟机软件包,将会看到图1-1 所示的虚拟机程序安装向导初始界面. 在虚拟机软件的安装向导界面单击"下一步"按钮,如图1-2所示. ...

  9. centos7生产环境下openssh升级

    由于生产环境ssh版本太低,导致使用安全软件扫描时提示系统处于异常不安全的状态,主要原因是ssh漏洞.推荐通过升级ssh版本修复漏洞 因为是生产环境,所以有很多问题需要注意.为了保险起见,在生产环境下 ...

  10. windows openssh server 安装试用

    使用Windows的可能会知道win10 的已经包好了openssh 服务,但是对于其他机器win 7 windows 2008 ,就需要其他的方法了 还好powershell 团队开发了支持wind ...