grid 布局 等比例
<!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 布局 等比例的更多相关文章
- Grid布局方式
wp7中Grid布局类似HTML中的表格,但是又不太一致! 为了测试新一个3行3列的Grid 方了方便,剔除掉其它XAML代码 [c-sharp:collapse] view plaincopy ...
- WPF/UWP 的 Grid 布局竟然有 Bug，还不止一个！了解 Grid 中那些未定义的布局规则
只要你用 XAML 写代码,我敢打赌你一定用各种方式使(nuè)用(dài)过 Grid.不知你有没有在此过程中看到过 Grid 那些匪夷所思的布局结果呢? 本文将带你来看看 Grid 布局中的 Bu ...
- 学懂grid布局：这篇就够了(译)
上周发过一篇关于flex布局的文章,但发完之后我感觉我并没有写很多自己对flex布局的理解,因为原链接的作者的轮子实在是太强了,这里借用知乎大佬牛岱的话来说,当人家已经有足够好的轮子,你就不要试图,甚 ...
- CSS的flex布局和Grid布局
一.什么是 flex 布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这 ...
- 手把手教你grid布局
概述 目前css布局方案中,网格布局可以算得上是最强大的布局方案了.它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局. 基本概念 在学习grid布局之前,我们需要了解一些基本概念 1 ...
- 关于基本布局之——Grid布局
Gird布局 一.关于概念 网格布局(Grid)是一个很强大的 CSS 布局方案.它可以将网页划分为多个网格任意拼接的布局,可以灵活的运用并实现出多种布局形式. (grid和inline-grid区别 ...
- cdispaly的Grid布局与Flex布局
cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...
- CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003
Title/ CSS Grid 布局(Grid Layout)完全指南 #flight.Archives003 序 : 写完这篇文章后,我准备一直做下去了,包括flight的各个分区,也看到前方的路. ...
- CSS学习笔记：grid布局
目录 一.Grid布局简介 二.Grid布局的一些概念 三. 容器元素属性 1. grid-template-* 1.1 网格行和列的设置 1.2 repeat的使用 1.3 使用fr 1.4 aut ...
随机推荐
- CentOS6.x 安装升级Python2.7.x Python3.4.x
CentOS6.x 安装升级Python2.7.x Python3.4.x 2015-06-07• CentOS.Linux • 评论关闭 CentOS release 6.6 (Final) 安装升 ...
- spring quartz job autowired 出错 null pointer
什么情况下才能用autowired? 当当前类属于spring IOC容器管时候就可以,比如在applicationContext.xml里有定义 就是说在spring上下文里能够找到 但是比如qua ...
- c#实现Form窗体始终在桌面最前端显示
方法一 //调用API [System.Runtime.InteropServices.DllImport("user32", CharSet = System.Runtime.I ...
- 二维树状数组+差分【p4514】上帝造题的七分钟
Description "第一分钟,X说,要有矩阵,于是便有了一个里面写满了\(0\)的\(n\times m\)矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为\((a,b)\),右 ...
- 记录（Record）
记录有可以被称为行(Row),可以通俗的认为它是数据表中的一行数据.以员工表为例,一个公司的员工表中的数据是这样的: 这里每一行数据就代表一个员工的资料,这样的一行数据就叫做一条记录.表是由行和列组成 ...
- Xamarin XAML语言教程控件模板的模板绑定
Xamarin XAML语言教程控件模板的模板绑定 控件模板的模板绑定 为了可以轻松更改控件模板中控件上的属性值,可以在控件模板中实现模板绑定功能.模板绑定允许控件模板中的控件将数据绑定到公共属性上. ...
- small test on 5.30 night T2
(题面写错了,应该是一条从b -> a 的边) 让我们设状态 (a,b,c) 表示存在一个点k,使得 dist(k,b) - dist(k,a) * 2 + 3 = c,显然这里的第三维可以压 ...
- 【贪心】【堆】bzoj1029 [JSOI2007]建筑抢修
按完成时限排序,一个个修复.若当前建筑花费时间+之前花费的总时间不超过时限,则ans++:否则,从之前已修复的建筑中挑一个耗时最多的,与当前建筑比较,若当前建筑更优,则更新ans. #include& ...
- python3开发进阶-Django框架的中间件的五种用法和逻辑过程
阅读目录 什么是中间件 中间件的执行流程 中间件的逻辑过程 一.什么是中间件? 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于在全局范围 ...
- linux 处理两个文件的并集,交集,计数
1. 取出两个文件的并集(重复的行只保留一份) cat file1 file2 | sort | uniq 2. 取出两个文件的交集(只留下同时存在于两个文件中的文件) cat file1 file2 ...