<!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. ORM之PetaPoco入门（一）--Petapoco简介

    1. ORM概括 1.1. ORM简介 ORM 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应 ...

  2. [转载]传智播客_SQL入门

    原文地址:传智播客_SQL入门作者:happylonger SQL * 数据定义语言 DDL * 数据操作语言 DML * 查询和更新指令构成了 SQL 的 DML 部分:  * SELECT - 从 ...

  3. 【区间选点问题】uva 10148 - Advertisement

    区间选点问题,即数轴上有n个闭区间[l1i, ri],取尽量少的点,使得每个区间内都至少有一个点. The Department of Recreation has decided that it m ...

  4. override和new的区别【摘】

    override 1. override是派生类用来重写基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract.overr ...

  5. activity调用finish方法理解

    /** * Call this when your activity is done and should be closed. The * ActivityResult is propagated ...

  6. 解决Redis Cluster模式下的排序问题

    通常的redis排序我们可以这么做: 比如按商品价格排序:sort goods_id_set by p_*_price 这样在非集群模式下是没问题的,但如果在集群模式下,就会报错: 说是在集群模式下不 ...

  7. ugui自制摇杆。

    珍爱生命,远离插件. 以上8个字,好好理解. 反正我是这么觉得. 我说的是unity,不是魔兽世界. 总有一天,我会一句一句写出属于自己的东西. 可以开始主题了.         如图所示,建立一个画 ...

  8. 详解Windows 7系统中IE8/IE9/IE10三个版本的关系（转）

    今年(2013)年初,微软开放了姗姗来迟的 IE10 for Windows 7 版本下载.至此,Windows 7 平台上可以运行三个 IE 浏览器版本.虽然 Windows 与 IE 经历了诸多版 ...

  9. [leetcode] 401. Binary Watch

    https://leetcode.com/contest/5/problems/binary-watch/ 这个题应该是这次最水的,这个题目就是二进制,然后是10位,最大1024,然后遍历,找二进制里 ...

  10. [Guava官方文档翻译] 2.使用和避免使用null (Using And Avoiding Null Explained)

    本文地址:http://www.cnblogs.com/hamhog/p/3536647.html "null很恶心." -Doug Lea "这是一个令我追悔莫及的错误 ...