<!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. 多选下拉框带搜索（aps.net）

    自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...

  2. nginx 4层tcp代理获取真实ip

    举个例子,Nginx 中的代理配置假如是这样配置的: location / { proxy_http_version 1.1; proxy_set_header X-Real-IP $remote_a ...

  3. 【jquery】jquery 实现许愿墙效果，可拖拽

    最近整理做过的项目,发现有个许愿墙的效果,今天拿出来给大家分享下. 先简单的介绍下功能点: 随机显示背景图或背景色 出现的位置随机 可以通过拖拽改变位置 好了,附上代码: <!doctype h ...

  4. SpringBoot2 @validated 类型效验

    详细参见:<Spring Boot 2精髓:从构建小系统到架构分布式大系统> 第三章 3.5节 验证框架 package com.archibladwitwicke.springboot2 ...

  5. 一圖讓你看懂javascript原型鏈

    每個對象的原型(protype)是一個對象 每個對象都有一個內置屬性protype(__pro__)指向一個對象

  6. [kafka] 003_kafka_主要配置

    1.broker配置 2.Producer主要配置 3.Consumer主要配置 出错提示信息: replication factor: 1 larger than available brokers ...

  7. Patterns for Asynchronous MVVM Applications: Commands

    Stephen Cleary Download the Code Sample This is the second article in a series on combining async an ...

  8. Self20171218_Eclipse+TestNg HelloWorld

    作为一个经典的入门例子,这里展示如何开始使用TestNG单元测试框架. 使用的工具 : TestNG 6.8.7 Maven 3 Eclipse IDE TestNG下载并安装 从这里 http:// ...

  9. 如何能够通过代码来重启Android手机？

    String cmd = "su -c reboot";//让手机从启 try { Runtime.getRuntime().exec(cmd); } catch (IOExcep ...

  10. 【Vue】VS Code+Vue入门 Helloworld

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...