CSS Grid layout布局
CSS Grid布局 （又名"网格"），是一个基于二维网格布局的系统，主要目的是改变我们基于网格设计的用户接口方式。你只需要定义一个容器元素并设置display：grid，使用grid-template-columns 和 grid-template-rows属性设置网格的列与 行的大小，然后使用grid-column 和 grid-row属性将其子元素放入网格之中。目前还处于 W3C 的工作草案之中，并且默认情况下，还不被所有的浏览器所支持。出于示例演示，建议你使用启用了特殊标志的 Chrome, Opera 或者 Firefox，现在介绍chrome浏览器开启示例功能；
可以直接在浏览器地址栏中输入网址：chrome://flags#enable-experimental-web-platform-features 立马定位需要的选项，然后点击“启用”(enable)按钮，然后重启浏览器即可。如下图：
下面是一个Grid布局的示例源码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style>
* {margin: 0;padding: 0;}
html,body {width: 100%;height: 100%;}
.container {
display: grid;
grid-template-columns: 33.333333% 33.333333% 33.333333%;
grid-template-rows: auto;
}
.item {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
margin: 3.333333%;
}
.item-5 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.item-7 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 4;
}
.item-12 {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 6;
grid-row-end: 6;
}
</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 class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
<div class="item item-11">11</div>
<div class="item item-12">12</div>
</div> </body>
</html>
预览效果如下：
CSS Grid layout布局的更多相关文章
- css grid 网格布局
前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...
- CSS Grid 网格布局教程
一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...
- CSS Grid Layout In Action
CSS Grid Layout In Action CSS 异形网格布局实战 refs https://static-nginx-online.fbcontent.cn/tutor/tutor-ybc ...
- css grid layout in practice
css grid layout in practice https://caniuse.com/#search=grid subgrid https://caniuse.com/#search=cal ...
- CSS Grid 网格布局全解析
介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...
- CSS: Grid Layout Module
Grid Layout The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, mak ...
- [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 ...
- CSS Grid网格布局全攻略
CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...
- 各个浏览器开启CSS Grid Layout的方式
2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...
随机推荐
- jQuery滑动导航菜单
js: $(function(){ $("ul.sub").parent().append("<span></span>"); $(&q ...
- Win7 & Win 8系统更新失败的解决
转自:Win 8系统更新失败的解决(原创) 这几天win 8又出了一大堆更新,而且是一更新完就要重启,重启之后照例要进入更新包的安装过程.不爽的是,屡屡在重启后出现"配置Windows更新失 ...
- 使用flask的时候遇到的问题及其解答
在网上看到了mircoblog的这个web程序,用flask框架写的,自己就在windows的环境下实现了下. 1.这个博客系统用到了一个flask插件叫flask_Login 里面涉及到编码解码的问 ...
- HDU 2369 Broken Keyboard（字符串）
点我看题目 题意 : 这个人的键盘坏了,最多只能按n个键,给你一串字符串,问你找一个最长的字串,这个字串中包含的不同的字母不能超过n个. 思路 : 比赛的时候脑子没转过来,一直没模拟出来,都不知道怎么 ...
- java程序执行时,JVM内存
高淇 java 31集 类代码,static,常量池到方法区 (常量池会在类之间共享) 局部变量 到栈 对象到 堆 高淇 32集 增加一个computer类
- 8. Unity异常警告错误处理方法
一. The AnimationClip 'cube1_anim' used by the Animation component 'Cube1' must be marked as Legacy. ...
- INV Close Period & GL Import Journal > DML tables
1. (N) Inventory > Accounting Close Cycle > Inventory Accounting Periods Insert data ...
- Sublime Text个性化设置
个性化格式化代码快捷键 其余快捷键设置方法类似,但注意不要与软件自带快捷键冲突 选择Preferences,点击Key Bingdings - User 在打开的文件中添加,其中ctrl+alt+sp ...
- Memcached 拒绝服务漏洞
漏洞名称: Memcached 拒绝服务漏洞 CNNVD编号: CNNVD-201401-176 发布时间: 2014-01-15 更新时间: 2014-01-15 危害等级: 漏洞类型: ...
- POJ 2249
#include<stdio.h> longlong sum; int main() { int k,n,m; while(~scanf("%d%d",&n,& ...