<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script src="js/jq.js"></script>

    <script src="js/ko.js"></script>

    <script src="resources/lib/core.js"></script>

    <script src="resources/lib/nav.js"></script>

    <script src="js/index.js"></script>

    <style>

        .container {

            width: 620px;

            height: 415px;;

            display: -ms-grid;

            -ms-grid-columns: 5px(200px 5px ) [ 3 ];

            -ms-grid-rows: 5px(200px 5px ) [ 2 ];

            border: 1px solid red;

        }

        .item {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;;

            border: 1px solid deepskyblue;

        }

        .item:nth-child(odd){

            background: cornflowerblue;

            color:white;

        }

        .item:nth-child(even){

            background: darkslategray;

            color:white;

        }

        .container .item:first-child {

            -ms-grid-column: 2;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(2) {

            -ms-grid-column: 4;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(3) {

            -ms-grid-column: 6;

            -ms-grid-row: 2;

        }

        .container .item:nth-child(4) {

            -ms-grid-column: 2;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(5) {

            -ms-grid-column: 4;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(6) {

            -ms-grid-column: 6;

            -ms-grid-row: 4;

        }

        .container .item:nth-child(7) {

            -ms-grid-column: 2;

            -ms-grid-row: 6;

        }

    </style>

</head>

<body>

<div class='container' data-bind='foreach:people'>

    <div class='item' data-bind='text:item'>

    </div>

</div>

</body>

</html>

ms-grid layout的更多相关文章

  1. CSS3 GRID LAYOUT

    CSS3 GRID LAYOUT http://www.w3cplus.com/blog/tags/356.html 中国首个开源 HTML5 跨屏前端框架 http://amazeui.org/

  2. iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6

    In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...

  3. Unity3D 使用 UI 的 Grid Layout Group 组件。

    1.首先创建一个容器,用于存放列表项的内容. 这里使用 Panel 来做为容器. 这里要注意! “Grid Layout Group”是要增加在容器的游戏对象里. 同时,只有容器对象的子对象才有排列效 ...

  4. WPF笔记(2.4 Grid)——Layout

    原文:WPF笔记(2.4 Grid)--Layout 第一章已经简单介绍过这个容器,这一节详细介绍.Grid一般是用表格(Grid.Row 和Grid.Column )的,比StackPanel更细致 ...

  5. flexbox与grid layout的区别

    flexbox是一种针对一维的局部布局,以轴为核心的弹性布局. grid layout是二维的更加全面的网格布局,

  6. CSS: Grid Layout Module

    Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...

  7. [Grid Layout] Use the repeat function to efficiently write grid-template values

    We can use the repeat() function if we have repeating specifications for columns and rows. With the  ...

  8. [Grid Layout] Describe a grid layout using named grid lines

    We can use named grid lines to describe our grid layout. Let’s see how to apply this to our grid-tem ...

  9. [Grid Layout] Specify a grid gutter size with grid-gap

    It’s beautifully straightforward to add a gutter to our grid layout. Let’s apply one with grid-gap.

  10. [CSS] Get up and running with CSS Grid Layout

    We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then ...

随机推荐

  1. NUMA CPU optimization

    technologies:  OS, CPU cache, numa structure, memory access

  2. CountDownLatch(闭锁)

    一.闭锁(Latch)    闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于一扇大门,在大门打开之前所有线程都被阻断,一旦大门打开所有线程都 ...

  3. Web前端发展简史

    Web前端发展简史 有人说“前端开发”是IT界最容易被误解的岗位,这不是空穴来风.如果你还认为前端只是从美工那里拿到切图, JS和CSS一番乱炖,难搞的功能就去网上信手拈来,CtrlC + Ctrl ...

  4. spark下统计单词频次

    写了一个简单的语句,还没有优化: scala> sc. | textFile("/etc/profile"). | flatMap((s:String)=>s.spli ...

  5. Android中Tomcat的简单配置和使用

    因为学Android已经有一段时间了,但是在学校,服务器方面是个短板啊,没有专门的服务器拿给我们学生练手,所以只有自己找办法了.当然,Tomcat就是不二的选择了. 在网上看了看资料,还是觉得自己记录 ...

  6. cocos2d-x实战 C++卷 学习笔记--第7章 动作、特效（一）

    前言: 介绍cocos2d-x中的动作.特效. 动作: 动作(action)包括基本动作和基本动作的组合,这些基本动作有缩放.移动.旋转等,而且这些动作变化的速度也可以设定. 动作类是 Action. ...

  7. Objective-C 学习笔记（Day 3，上）

    ------------------------------------------- 类方法   ①类方法:        + 开头的方法(定义的过程形式和对象方法一样,只不过 + 开头,这是唯一的 ...

  8. wpf ListBox或ListView等数据控件 绑定数据，最简单的方式

    在网上很难找最简单的案例,都是一大片,看着都头疼: 试试举一反三,如果把结果赋给DataContext这个属性,那就前台需要绑定ItemsSource="{Binding}",请注 ...

  9. string和stringbuilder

    1)String是一个引用类型,一旦字符串被创建,就不能修改 例如: String a="AAA"; String b=a; a与b值相同,但不是同一个对象: 每次使用 Syste ...

  10. C#中var类型

    var关键字是C#3.0新增的特性,当你不能确定自己需要使用的类型时,可以选择使用var var可以代替任何类型,var关键字指示编译器根据初始化语句右侧表达式推断变量类型 例: int a = 2 ...