<!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. resttemplate 文件上传 上传文件

    springmvc RestTemplate文件上传 RestTemplate上传文件总结

  2. Mac生成ssh key

    ssh-keygen

  3. Materialize快速入门教程

    https://materializecss.com/ https://github.com/Dogfalo/materialize http://www.materializecss.cn/ 1,下 ...

  4. JSP字符集编码集合

    在这里,我们先说说JSP/Servlet中的几个编码的作用. 在JSP/Servlet 中主要有以下几个地方可以设置编码,pageEncoding="UTF-8".contentT ...

  5. android地址位置

    有精度纬度确定地理位置 latitude: 23.1352888---longitude: 113.3297445 调用Google API接口: URL: http://maps.google.cn ...

  6. Semantic segmentation using adversarial networks

    FAIR Paris分部的论文,NIPS2016 Workshop. Motivation是让predict出来的结果和真实label在高层感觉上有一致性. 基本思想就是用GAN来区分segmenta ...

  7. 【转】【Nginx】Nginx 入门教程 + 常用配置解析

    == Nginx介绍和安装 == Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器, 其性能与IMAP/POP3代理服务器相当.Nginx以其高性能.稳定.功能丰富.配置简单 ...

  8. 第三百三十七节，web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS

    第三百三十七节,web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS PhantomJS虚拟浏览器 phantomjs 是一个基于js的webkit内核无头浏览器 ...

  9. 无法定位序数 12384 于动态链接库 mfc90.dll

    场景: 运行 vs2008 编译生成的一个 exe 错误: 无法定位序数 12384 于动态链接库 mfc90.dll 原因: 缺少vc++ 2008 运行库. vcredist 全称Microsof ...

  10. SpringBoot系列十一：SpringBoot整合Restful架构（使用 RestTemplate 模版实现 Rest 服务调用、Swagger 集成、动态修改日志级别）

    声明:本文来源于MLDN培训视频的课堂笔记,写在这里只是为了方便查阅. 1.概念:SpringBoot整合Restful架构 2.背景 Spring 与 Restful 整合才是微架构的核心,虽然在整 ...