<!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. Eclipse和Tomcat使用过程的一些配置、错误等的总结记录

    背景:公司项目使用jdk1.6.tomcat7.SVN,本文总结使用到现在的一些配置和问题. 1.Eclipse项目几点配置:(1)Windows -> Preferences -> Ja ...

  2. Shiro学习笔记 三(认证授权)

    第一种首先基于角色的权限控制 1.由于不断的创建SecurityFactory工程等步骤重复多次,所以应该将这些步骤封装成一个工具类 还是首先看一下目录结构 主要用到文件 首先贴一下工具类的方法 pa ...

  3. 总结Javascript中数组各种去重的方法

    相信大家都知道网上关于Javascript中数组去重的方法很多,这篇文章给大家总结Javascript中数组各种去重的方法,相信本文对大家学习和使用Javascript具有一定的参考借鉴价值,有需要的 ...

  4. 利用React Native 从0到1 开发一款兼容IOS和android的APP（仿造京东）

    最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容I ...

  5. 前端性能优化之按需加载(React-router+webpack)

    一.什么是按需加载 和异步加载script的目的一样(异步加载script的方法),按需加载/代码切割也可以解决首屏加载的速度. 什么时候需要按需加载 如果是大文件,使用按需加载就十分合适.比如一个近 ...

  6. 使用git上传项目到github的最基础命令

    一.前言 把github作为自己项目托管的地方,实在是一个明智的选择.就算你不为自己项目考虑,你也要为你团队项目开发而学呀!可能有些初学者(比如我)会觉得git命令好多啊,又是各种术语,觉得好难上手. ...

  7. _equipment

    该表控制切换地图自动更换装备,离开该地图时,装备自动切换为原来.,HEAD - TABARD小于0时取下装备,等于0时不更换,大于0时更换为对应装备. comment 备注 class 职业索引 1- ...

  8. Virtualbox-CentOS网络配置

    1.记下虚拟网卡IP 2. 配置网卡1.网卡2 网卡1 ---对应---eth0----NAT(网络地址转换)用来与外网通信 网卡2 ---对应---eth1----Host-only用来与主机通信 ...

  9. @Value("#{}")与@Value("${}")的区别以及用法

    package com.ieou.capsule_basic_info.util; import org.springframework.beans.factory.annotation.Value; ...

  10. js 捕获浏览器后退事件

    $(document).ready(function(e) {             var counter = 0;             if (window.history &&am ...