<!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. AtCoder Beginner Contest 120 解题报告

    为啥最近都没有arc啊... A - Favorite Sound #include <algorithm> #include <iostream> #include < ...

  2. sql 创建数据语句

    https://zhidao.baidu.com/question/149116757.html   create database stuDB  on  primary  -- 默认就属于prima ...

  3. echarts获取数据的一些难点1

    像上面获取数据后,如果再根据下方按钮查询不同获取的价格,虽然曲线价格能按照不同的来展示, 但是问题有: 查询到的company字段虽然在获取的data中能测试出,但是在上方填入这些companys后, ...

  4. WEB 安全学习 一、mysql 注入漏洞

    转载: https://www.cnblogs.com/cui0x01/p/8620524.html 一.Mysql数据库结构 数据库A 表名 列名 数据 数据库B 表名 列名 数据 Mysql5.0 ...

  5. 案例2：用一条SQL查询出数学语文成绩都大于80分的学生姓名?

    方法1: 查出科目成绩有小于80分的学生姓名,再约束并去重学生不等于查出来的姓名 select distinct A.name from t_score A where A.name not in(s ...

  6. Lintcode9-Fizz Buzz-Easy

    Fizz Buzz Given number n. Print number from 1 to n. But: when number is divided by 3, print "fi ...

  7. Java基础 --Unix与Mac系统 文件路径分隔符（一）

    斜杠‘/’与反斜杠‘\’在不同系统的使用 1)Window平台使用反斜杠'\'作为文件层级分隔符:Windows使用反斜杠作为DOS命令提示符的参数标志,随着发展DOS命令符逐渐被淘汰,大部分情况下斜 ...

  8. Spring-JDBC依赖

    <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</a ...

  9. centos nginx 中安装ssl证书 以及在项目中的使用

    今天阿里云的证书到期了,重新申请了一个,下面是从申请到安装以及结合项目使用的过程: 1.登录阿里云   2.在左侧找到SSL证书 3.申请免费的证书 4.下载证书 5.根据说明配置nginx 6.在项 ...

  10. ASP.NET中Page_Load()与Page_Init()的区别

    Page_Init()事件:aspx初始化时触发,只执行一次,常用于页面初始化,并且执行在page_load之前,如果在aspx的程序中需要使用该方法,那么该方法的类需要继承 System.Web.U ...