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 ...
随机推荐
- pandas基础学习
1.导入两个数据分析重要的模块import numpy as npimport pandas as pd2.创建一个时间索引,所谓的索引(index)就是每一行数据的id,可以标识每一行的唯一值dat ...
- hdu 5194(DFS)
DZY Loves Balls Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)T ...
- redis持久化的方法及对比
1.持久化的作用 redis所有的数据保持在内存中,对数据的更新将异步的保存到磁盘上. 两种方式: 2.RDB 2.1.概念 2.2.触发机制 2.2.1.save 同步 因为是同步命令,数据量大的话 ...
- ThinkPHP的静态化页面方法
原来ThinkPHP自带了生成静态页的函数buildHtml,使用起来很方便!最新的手册里没写这个方法,向大家介绍一下. protected function buildHtml($htmlf ...
- Spark GraphX宝刀出鞘，图文并茂研习图计算秘笈与熟练的掌握Scala语言【大数据Spark实战高手之路】
Spark GraphX宝刀出鞘,图文并茂研习图计算秘笈 大数据的概念与应用,正随着智能手机.平板电脑的快速流行而日渐普及,大数据中图的并行化处理一直是一个非常热门的话题.图计算正在被广泛地应用于社交 ...
- ubuntu下执行ulimit返回“不允许的操作”，问题解决思路
在ubuntu下执行ulimit,希望修改允许的最大打开文件数,但返回“不允许的操作”. 使用ulimit -a查看当前配置 core file size (blocks, -c) 0 data se ...
- boost::Circular Buffer
boost.circular_buffer简介 很多时候,我们需要在内存中记录最近一段时间的数据,如操作记录等.由于这部分数据记录在内存中,因此并不能无限递增,一般有容量限制,超过后就将最开始的数据移 ...
- React Native之ES5/ES6语法差异对照表
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- linux-内存使用-free
解释一下Linux上free命令的输出. 下面是free的运行结果,一共有4行.为了方便说明,我加上了列号.这样可以把free的输出看成一个二维数组FO(Free Output).例如: FO[2][ ...
- Jetty错误： badMessage: java.lang.IllegalStateException: too much data after closed for HttpChannelOverHttp@472adad9{r=2,c=false,a=IDLE,uri=}
最近用Jetty跑Spring MVC接收POST请求(POST中数据很大).出现数据无法获取到的问题.如: @RequestMapping(value = "/receive", ...