<!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. spring-tool-suite使用教程，并创建spring配置文件

    本文为博主原创,未经允许不得转载: 在应用springMVC框架的时候,每次创建spring的xml配置文件时,需要很多步骤,非常麻烦. 所以spring提供了spring-tool-suite插件, ...

  2. dRMT: Disaggregated Programmable Switching, SIGCOMM17

    Reference: dRMT, SIGCOMM 2017 今年的SIGCOMM17会议上,Cisco System和MIT的团队针对RMT模型现有的问题,合作发表了这篇"dRMT: Dis ...

  3. HDU 4859 海岸线（最小割+最大独立点权变形）

    http://acm.hdu.edu.cn/showproblem.php?pid=4859 题意: 欢迎来到珠海!由于土地资源越来越紧张,使得许多海滨城市都只能依靠填海来扩展市区以求发展.作为Z市的 ...

  4. tomcat中实现特定路径下的图片的url访问Tomcat配置图片保存路径，图片不保存在项目路径下

    使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保 ...

  5. 批量Excel数据导入Oracle数据库

    由于一直基于Oracle数据库上做开发,因此常常会需要把大量的Excel数据导入到Oracle数据库中,其实如果从事SqlServer数据库的开发,那么思路也是一样的,本文主要介绍如何导入Excel数 ...

  6. 获得WebBrowser中的图片数据

    /// <summary> /// 获取WebBrowser指定的图片 /// </summary> /// <param name="webBrowser&q ...

  7. Python深入：Distutils发布Python模块--转载

    https://blog.csdn.net/gqtcgq/article/details/49255995 Distutils可以用来在Python环境中构建和安装额外的模块.新的模块可以是纯Pyth ...

  8. CSS垂直居中查询宝典

    一.垂直居中的用处 设计稿需求 当我们抱怨设计反复不定的时候,试着理解一下.每一位开发者也会是一位用户,请多多用'用户'的角色去开发.就比如下面这图,你会更稀饭哪种格式呢? 如果我们使用一个webap ...

  9. _itemmod_nopatch、_itemmod_nopatch_level、_itemmod_nopatch_spell、_itemmod_nopatch_src、_itemmod_nopatch_stat、_itemmod_nopatch_stat_prefix

    原始物品(_itemmod_nopatch中Entry)需要能够装备 该功能产生的新物品不需要制作dbc 尽量避免配置主动技能(_itemmod_nopatch_spell) _itemmod_nop ...

  10. JaveWeb 公司项目（4）----- Easyui的表单验证

    前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...