<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  body {

    padding: 50px;

  }

  .wrapper {

    display: grid;

    grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;

    grid-template-rows: auto 10px auto 10px auto 10px auto 10px auto;

  }

  .box {

    background-color: #444;

    color: #fff;

    font-size: 150%;

    padding: 20px;

    text-align: center;

  }

  .a {

    grid-area: 1 / 1 / 2 / 6;

  }

  .b {

    grid-area: 1 / 7 / 10 / 8;

    background: orange;

  }

  .c {

    grid-area: 3 / 1 / 4 / 2;

  }

  .d {

    grid-area: 3 / 3 / 4 / 4;

  }

  .e {

    grid-area: 3 / 5 / 4 / 6;

  }

  .f {

    grid-area: 5 / 1 / 6 / 4;

  }

  .g {

    grid-area: 5 / 5 / 6 / 6;

  }

  .h {

    grid-area: 7 / 1 / 8 / 2;

  }

  .i {

    grid-area: 7 / 3 / 8 / 6;

  }

  .j {

    grid-area: 9 / 1 / 10 / 6;

    word-break: break-all;

  }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="box a">A</div>

    <div class="box b">B</div>

    <div class="box c">C</div>

    <div class="box d">D</div>

    <div class="box e">E</div>

    <div class="box f">F</div>

    <div class="box g">G</div>

    <div class="box h">H</div>

    <div class="box i">I</div>

    <div class="box j">JkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkkJkkkkk</div>

  </div>

</body>

</html>

grid简单布局的更多相关文章

  1. WPF简单布局 浅尝辄止

            WPF的窗口只能包含一个元素,为了在WPF窗口中放置多个元素并创建更实用的用户界面,需要在窗口上放置一个容器,然后在容器中放置其它元素. 注意:造成这一限制的原因是window类继承自 ...

  2. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  5. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  6. grid栅格布局

    前面的话 Grid布局方式借鉴了平面装帧设计中的格线系统,将格线运用在屏幕上,而不再是单一的静态页面,可以称之为真正的栅格.本文将详细介绍grid布局 引入 对于Web开发者来说,网页布局一直是个比较 ...

  7. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  8. table 和 div 简单布局

    table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  9. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

随机推荐

  1. PHP开发工程师-技能树

    参考进阶-PHP程序员的技术成长规划-http://blog.csdn.net/heiyeshuwu/article/details/40098043 LNMP / LAMP 环境搭建(单组件安装,非 ...

  2. Ubuntu 安装软件方法

    Ubuntu软件安装有几种方式,常用的是deb包的安装方式,deb是debian系列的Linux包管理方式,Ubuntu软件安装属于debian的派生,也默认支持这种软件安装方式,当下载到一个deb格 ...

  3. 关于Unity中新版动画系统的使用

    Mecanim动画 1:旧版动画系统只能通过代码来控制动画播放,随着动画种类变多,代码复杂度也会增加,同时动画过渡也需要非常繁琐的代码控制,为了让有经验的动画师开发动画,unity推出了针对人物角色的 ...

  4. c指针 --笔记2返回指针值的函数

    返回指针值的函数 一般带回指针值的函数,定义形式为: int *a (int x, int y); 看这个经典案例: #include <stdio.h> int main(int arg ...

  5. Lucene系列四：Lucene提供的分词器、IKAnalyze中文分词器集成、扩展 IKAnalyzer的停用词和新词

    一.Lucene提供的分词器StandardAnalyzer和SmartChineseAnalyzer 1.新建一个测试Lucene提供的分词器的maven项目LuceneAnalyzer 2. 在p ...

  6. e816. 创建工具栏

    A toolbar can be either horizontal or vertical. When the orientation is horizontal, the objects in t ...

  7. e867. 获取和设置外观

    To change the look and feel, you need to know the class name of the new look and feel. This example ...

  8. Autofac应用总结

    准备: public interface IDAL { void Insert(string commandText); } public class SqlDAL : IDAL { public v ...

  9. Keystone API

    Keystone身份API简介 Keystone提供REST风格的API, 客户端可以通过HTTP方法和URL操作资源. Keystone有两个主要版本的API, 以及构建在这些核心API上的一些AP ...

  10. Xianfeng轻量级Java中间件平台：流水号管理、组织机构管理

    流水号管理:现实中,经常都会和流水号打交道,至于什么是流水号,简而言之,就是按照特定格式要求产生的一个号码,并且总是按照递增的规则生成的,对于要求比较高的业务,需要流水号是连续的,比如移动营业厅排号小 ...