<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid的简单使用</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="container">
        <div class="item-a">1</div>
        <div class="item-b">2</div>
        <div class="item-c">3</div>
        <div class="item-d">4</div>
    </div>
</body>
</html>

css:

.container > div{
    border:1px solid blue;
}
.item-a {
  grid-area: header;
 
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}
.container {
    display:grid;
    width:500px;
    height:500px;
    background-color:red;
    grid-template-columns: 125px 125px 125px 125px 125px;
    grid-template-rows: auto;
    grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

grid的简单使用的更多相关文章

  1. jQuery的几个Grid插件简单比较

    目标:实现一个类似于Excel功能的Grid数据维护功能,并且就地编辑在乎的是Cell编辑而不是行编辑 候选者:easy-ui之datagrid, jqgrid, flexigrid 使用环境:jqu ...

  2. Minieye杯第十五届华中科技大学程序设计邀请赛网络赛D Grid（简单构造）

    链接:https://ac.nowcoder.com/acm/contest/560/D来源:牛客网 题目描述 Give you a rectangular gird which is h cells ...

  3. CF 某套题 O ：Grid （简单BFS）

    题意: 从左上角跳到右下角最少需要多少步,跳的规则为:可以向四个方向的任意一个方向跳当前格子中的步数,若跳不到右下角输出IMPOSSIBLE. 题解: BFS搜索,注意判断边界,标记. 代码: #in ...

  4. 前端分页神器，jquery grid的使用（前后端联调），让分页变得更简单。

    jquery grid 是一款非常好用的前端分页插件,下面来讲讲怎么使用. 首先需要引入jquery grid 的CSS和JS (我们使用的是bootstrap的样式) 下面我们通过一个例子来讲解,需 ...

  5. 【Win 10 应用开发】InkToolBar——涂鸦如此简单

    从WPF开始,就有个InkCanvas控件,封装了数字墨迹处理相关的功能,Silverlight到Win 8 App,再到UWP应用,都有这个控件,所以,老周说了3688遍,凡是.net基础扎实者,必 ...

  6. wxpython grid

    构建Grid方法,效果如下: 其它构建grid方法和grid的使用见:还可以见下载资源中的wxpython教程第5章的 gridGeneric.py gridModel.py gridNoModel. ...

  7. Tkinter 的三大布局管理器 pack、grid 和 place用法汇总

    学习python的tkinter免不了要对各个组件进行位置的排放与设定,常用的布局管理器有grid,pack和place.这三种均用于同一父组件下的组件布局,但是也是有区别的,先看下他们各自的含义吧. ...

  8. UWP开发-重新理解MVVM

    MVVM是一个比较热门的开发框架,尽管已经出现很久了,仍然比较受欢迎.MVVM框架包括: M:Model:Model指的是数据模型,例如你要在页面展示联系人信息,那么Model就是联系人的模型,包括联 ...

  9. jquery easy ui 1.3.4 数据表格(DataGrid)（8）

    8.1.创建DataGrid html代码 <table id="dg"></table> $("#dg").datagrid({ // ...

随机推荐

  1. Sample Classification Code of CIFAR-10 in Torch

    Sample Classification Code of CIFAR-10 in Torch from: http://torch.ch/blog/2015/07/30/cifar.html req ...

  2. Unity3D代码动态修改材质球的颜色

    代码动态修改材质球的颜色: gameObject.GetComponent<Renderer>().material.color=Color.red;//当材质球的Shader为标准时,可 ...

  3. Hyper-v虚拟机

    Hyper-V1:创建和管理虚拟机 Hyper-V2:向VM增加虚拟硬盘 Hyper-V3:虚拟机的配置 使用Hyper-V创建虚拟机 Hyper-v 安装CentOS 7 (其他虚拟机一样参考)

  4. yyyy-MM-dd'T'HH:mm:ss.SSS'Z'即UTC时间，与String日期转换

    本文为博主原创,未经允许不得转载: 最近在使用一个时间插件的时候,接收到的时间格式是 ’2017-11-27T03:16:03.944Z’ ,当我进行双向数据绑定的时候,由后台传过来的时间绑定到时间 ...

  5. 所有JTAG集成电路都应该支持菊花链

    菊花链 在电气和电子工程中,菊花链是一种布线方案,其中多个设备按顺序或环形连接在一起.相邻设备才能通信.菊花链可用于电源,模拟信号,数字数据或其组合. 但是由于菊花链的串联特性,如果任何一个设备从链路 ...

  6. SAP月末结账年结流程

    SAP月末结账年结流程 SAP月末结账操作指南 流程描述:FI期末结帐流程包括应收帐款.应付帐款.固定资产.管理会计结帐.总帐结帐等一系列结帐过程,对于年结增加了余额结转及固定资产年度改变等动作,通过 ...

  7. 语法对照表ES5VSES6

    模块 导入 在ES5里面,如果使用CommonJS的标准,引入包一般是使用require来的 //ES5 js var React = require("react") var { ...

  8. layout_gravity与gravity的区别,和padding margin的区别

    https://blog.csdn.net/github_39688629/article/details/77790541

  9. java环境变量怎么配置

    我们在学习java的时候,必须先来配置一下java的环境变量,也许你不懂什么是java环境变量,我们也不需要懂,你只要知道,java环境变量配置好了,你的电脑就能编译和运行java程序了,这显然是你想 ...

  10. 深入JVM对象引用

    在jdk 1.2以前,创建的对象只有处在可触及(reachaable)状态下,才能被程序所以使用,垃圾回收器一旦发现无用对象,便会对其进行回收.但是,在某些情况下,我们希望有些对象不需要立刻回收或者说 ...