<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>grid 布局 等比例设置布局</title>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            .container {

                display: grid;

                grid-template-columns: 1fr 2fr;

                grid-template-rows: 100% 100%;

            }

            .item-1 {

                background: #008000;

            }

            .item-2 {

                background: #808080;

            }

            .item-3 {

                background: gold;

            }

            .item-4 {

                background: pink;

            }

            .item-5 {

                background: yellow;

            }

            .item-6 {

                background: #FFD700;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="item item-1">1</div>

            <div class="item item-2">2</div>

            <!--<div class="item item-3">3</div>

            <div class="item item-4">4</div>

            <div class="item item-5">5</div>

            <div class="item item-6">6</div>-->

        </div>

    </body>

</html>

grid 布局 等比例的更多相关文章

  1. Grid布局方式

    wp7中Grid布局类似HTML中的表格,但是又不太一致! 为了测试新一个3行3列的Grid 方了方便,剔除掉其它XAML代码 [c-sharp:collapse] view plaincopy   ...

  2. WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则

    只要你用 XAML 写代码,我敢打赌你一定用各种方式使(nuè)用(dài)过 Grid.不知你有没有在此过程中看到过 Grid 那些匪夷所思的布局结果呢? 本文将带你来看看 Grid 布局中的 Bu ...

  3. 学懂grid布局：这篇就够了(译)

    上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...

  4. CSS的flex布局和Grid布局

    一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...

  5. 手把手教你grid布局

    概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1 ...

  6. 关于基本布局之——Grid布局

    Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...

  7. cdispaly的Grid布局与Flex布局

    cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...

  8. CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003

    Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...

  9. CSS学习笔记：grid布局

    目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...

随机推荐

  1. win32 listctrl控件右键菜单的实现

    HMENU Menu_list,Menu_all; POINT point; HINSTANCE hInstance;//下面代码放到BOOL WINAPI DialogProc下 case WM_C ...

  2. 最近项目中用到的js

    1.用字典判断数组是否有重复function ticketTypeValidate() { var ticketArr = []; var tickettype = $("div[name= ...

  3. CodeForces 669C

    链接:http://codeforces.com/problemset/problem/669/C http://www.cnblogs.com/Ash-ly/p/5443155.html 题意: 给 ...

  4. shell head tail

    head:  打印文件的前10行(默认) tail:     打印文件的后10行(默认) 如果你是个典型的开发或者部署人员,是不是觉得开始亲切起来.我们平时用的最多的命令 $tail -f  cata ...

  5. [BZOJ2111][ZJOI2010]Perm排列计数(组合数学)

    题意就是求一个n个点的堆的合法形态数. 显然,给定堆中所有数的集合,则这个堆的根是确定的,而由于堆是完全二叉树,所以每个点左右子树的大小也是确定的. 设以i为根的堆的形态数为F(i),所以F(i)+= ...

  6. 【2-SAT】【并查集】ICM Technex 2017 and Codeforces Round #400 (Div. 1 + Div. 2, combined) D. The Door Problem

    再来回顾一下2-SAT,把每个点拆点为是和非两个点,如果a能一定推出非b,则a->非b,其他情况同理. 然后跑强连通分量分解,保证a和非a不在同一个分量里面. 这题由于你建完图发现都是双向边,所 ...

  7. 【kmp算法】poj2406 Power Strings

    如果next[n]<n/2,一定无解. 否则,必须要满足n mod (n-next[n]) = 0 才行,此时,由于next数组的性质,0~n-next[n]-1的部分一定是最小循环节. [ab ...

  8. 【离散化】【扫描线】CH Round #59 - OrzCC杯NOIP模拟赛day1 队爷的新书

    //上图绿色扫描线右侧少画了一条扫描线. 很多区间把数轴分成了很多段,看哪个点的(区间覆盖数*该点权值)最大. 显然在某个区间的右端点的答案是最优的. 排序后 用扫描线从左到右扫描,维护每个点的覆盖数 ...

  9. 【暴力】bzoj3713 [PA2014]Iloczyn

    没什么好说的. #include<cstdio> using namespace std; typedef long long ll; ]; int main() { scanf(]=; ...

  10. [CF864F]Cities Excursions

    题目大意: 一个$n(n\le3000)$个点的有向图,$q(q\le4\times10^5)$组询问,每次询问$s_i,t_i$之间是否存在一条字典序最小的路径(可以重复经过不为$t_i$的结点). ...