CSS grid学习（一）

一，兼容性

需要兼容IE10以下、ios 10.3 的Safari以下的话，该布局方式不适用。

　数据来自：Can I use: https://www.caniuse.com/#search=grid

二、基本使用

<div class="grid-layout"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div>
</div>

.grid-layout{display: grid;grid-template-columns: 1fr 2fr 1fr;text-align: center;}.item1{ background: #f857b5;}.item2{ background: #fdffdc;}.item3{ background: #c5ecbe;}

效果图

// 使用grid布局
display: grid;     // 指定网格列数为 3列( 有3个参数 )
// fr 代表自适应宽的单位。
grid-template-columns: 1fr 2fr 1fr;

grid-template-columns代表列数的分配，行数分配是否可行呢？

.grid-layout{...  grid-template-rows: 100px 20px;
}

　　　　　　　　　　　　　　　　　　　　　　　效果图

我们发现高度为120px，正好等于 grid-template-rows的值之和。且元素自动占第一行。

三、合并网格

接下来我们试试将横、纵向的网格进行合并。

.item1{grid-row:1/span 2;  background: #f857b5;
}
.item3{ grid-row:1/span 2;

grid-column:3/4;

    background: #c5ecbe;
}

grid-row 是 grid-row-start和 grid-row-end 的缩写
grid-column 是 grid-column-start和 grid-column-end 的缩写

效果图

在介绍 1/span 2 之前需要了解网格线是什么;

                                          网格线

grid-column:3/4; 代表从第 3 条纵线到第 4 条纵列的区域。

grid-row:span 1/2;代表从第 1 条横线到第 2 条横线的区域。中间多的 span 是一个属性值，代表合并网格的意思。

因此，item1能将第一横行的1 ~ 2列合并。item2能将第三列的 1 ~ 2行合并。 那么grid-column: 3/4; 是不是多余的呢？删掉之后，item2便会将其他元素挤下去。仍有待研究。

现在可以布局以下界面啦：

<div class="grid-layout"><div class="nav">nav</div><div class="aside">aside</div><div class="main">main</div><div class="footer">footer</div>
</div>

    .grid-layout {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 100px 200px 80px;}.nav {background: #f857b5;grid-column: 1/span 2;}.aside {background: #fdffdc;grid-row: 1/span 2;grid-column: 3/4}.main {background: #c5ecbe;grid-column: 1/span 2}.footer {background: #f857b5;grid-column: 1/span 4}

转载于:https://www.cnblogs.com/miku561/p/10484914.html

CSS grid学习（一）相关推荐

miniui文件上传 linux,MINIUI grid学习笔记
grid 控件 a.事件的绑定和移除 grid.on("rowclick", fn); //绑定事件 (这个的话类似jquery的绑定事件) grid.un("rowcl ...
使用 CSS Grid Generator来快速使用及学习 Grid 布局
CSS Grid Generator CSS Grid Generator 是一个由Sarah Drasner创建的免费工具.它是一个可视化设计工具,允许咱们创建一个基本的 grid 布局,然后就可以 ...
vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型
vue css 应用变量 CSS Grid and CSS Variables are both huge wins for front-end developers. The former make ...
[译] 你不需要基于 CSS Grid 的栅格布局系统
本文讲的是[译] 你不需要基于 CSS Grid 的栅格布局系统, 原文地址:You do not need a CSS Grid based Grid System 原文作者:Rachel Andr ...
翻译 | CSS网格（CSS Grid）布局入门
原文地址:Getting to know CSS Grid Layout 原文作者:Chris Wright 译者:华翔校对者:珂珂.干干翻译 | CSS网格(CSS Grid)布局入门 bann ...
CSS Grid 网格布局全解析
一.介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情 ...
带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...
CSS Grid网格布局全攻略
CSS Grid网格布局全攻略所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

CSS grid学习（一）

一，兼容性

二、基本使用

三、合并网格

CSS grid学习（一）相关推荐

最新文章

热门文章