<!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. 编译 glibc-2.14 时出现的一个LD_LIBRARY_PATH不路径bug

    ../configure --prefix=/home/zzhy/wd/software/glibc-2.14 错误:checking LD_LIBRARY_PATH variable... cont ...

  2. Python示例

    http request:put # 定义函数:refresh segement # curl -X PUT -s --user "****:*****" -H 'Content- ...

  3. HDU 5236 Article（概率DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=5236 题意:现在有人要在文本编辑器中输入n个字符,然而这个编辑器有点问题. 在i+0.1s(i>=0)的时 ...

  4. 51nod 1052 最大M子段和

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1052 题意: 思路:设$dp[i][j]$表示前j个数构成i个字段时的最 ...

  5. python学习 day017打卡 类与类之间的关系

    本节主要的内容: 1.依赖关系 2.关联关系,组合关系,聚合关系 3.继承关系,self到底是什么? 4.类中的特殊成员 一.类与类之间的依赖关系 在面向对象的世界中,类与类中存在以下关系: 1.依赖 ...

  6. iterrows(), iteritems(), itertuples()对dataframe进行遍历

      iterrows(): 将DataFrame迭代为(insex, Series)对. itertuples(): 将DataFrame迭代为元祖. iteritems(): 将DataFrame迭 ...

  7. Oracle(限定查询2)

    3.2 对数据进行限定查询 在标准SQL之中定义了许多的运算符. 3.2.1.关系运算符 范例: 范例: 范例: 在使用关系运算符判断字符数据的时候注意大小写的编写问题.因为Oracle是区分大小写的 ...

  8. GCD LCM UVA - 11388

    代码很短理解不容易,在这说不清,大家代码里寻真相. 为什么二者相除就可以A了多找点数试试理解理解. #include<stdio.h> #define mod 1000000007 #de ...

  9. IPC 之 ContentProvider 的使用

    一.概述 ContentProvider 是 Android 中提供的专门用于不同应用间进行数据共享的方式.和 Messenger 一样,ContentProvider 的底层实现同样也是 Binde ...

  10. 力扣（LeetCode）58. 最后一个单词的长度

    给定一个仅包含大小写字母和空格 ' ' 的字符串,返回其最后一个单词的长度. 如果不存在最后一个单词,请返回 0 . 说明:一个单词是指由字母组成,但不包含任何空格的字符串. 示例: 输入: &quo ...