Grid网格布局学习（1）

Jaden 发布于2019-08-30 15:56 / 2054人阅读

摘要：阮一峰的网格布局教程于月号发布正好学习一波布局。布局是二维布局将容器划分成行和列产生单元格然后指定项目所在的单元格。

阮一峰的网格布局（grid）教程于3月25号发布,正好学习一波grid布局。虽然grid布局还不能够支持商用,扩展一下知识面也是好的。

grid布局在主流浏览器的支持情况can i use查看

grid号称是史上最强大的布局方案，它将网页划分成一个个小网格，可以任意组合不同的网格,做成各式各样的布局。

grid布局和flex布局不同，flex布局是一维布局，只能改变项目的轴线位置。grid布局是二维布局,将容器划分成行和列,产生单元格,然后指定项目所在的单元格。

容器属性 display属性

display:grid 指定一个容器采用网格布局。

div{
    display:grid
}

默认情况下容器都是块级元素,但也可以设置成行内元素。

div{
    diplay:inline-grid;
}

注意:设置成网格布局之后，容器的float、display:inline-block、display:inline-cell、vertical-align和column-*等设置都失效。

grid-template-columns属性和grid-template-rows属性

容器指定为网格布局之后,就要设置列宽 grid-template-columns、行高 grid-template-rows

div{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}
//指定了三行三列的网格,列宽和行高都是100px。

除了设置px还可以用百分比

div{
    display:grid;
    grid-template-columns:33.3% 33.3% 33.3%;
    grid-template-rows:33.3% 33.3% 33.3%;
}

repeat()

网格特别多的时候可以用repeat函数简化重复的值。

div{
    display:grid;
    grid-template-columns:repeat(3,33.3%);
    grid-template-rows:repeat(3,33.3%);
}

repeat()接受2个参数,第一个参数是重复的次数,第二个参数是所要重复的值。
repeat()重复某种模式也是可以的

grid-template-columns:repeat(2, 100px 20px 80px);

auto-fill关键字

有时候单元格大小是固定的，但是容器大小是不确定的,如果希望每一行或每一列容纳尽可能多的单元格,这时可以用auto-fill关键字表示自动填充。

.container{
    display:grid;
    grid-template-columns:repeat(auto-fill,100px)
}
//自动填充，每列宽100px;

fr关键字

为了表示比例关系,网格布局提供了fr关键字。如果两列的宽分别为1fr和2fr,就表示后者是前者的2倍。

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
}

minmax()

minmax()函数产生一个长度范围,表示长度就在这个范围之内,接受两个参数,分别是最小值、最大值

grid-tempalte-columns:1fr 1fr minmax(100px,1fr);

auto关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns:100px auto 100px;

未完待续

GPU云服务器云服务器网格布局学习css布局中国网格学习主机 Grid

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117578.html

(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 评论0 收藏0
(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 评论0 收藏0
翻译 | CSS网格（CSS Grid）布局入门

摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔校对者：珂珂、干干翻译 | CSS网格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 评论0 收藏0
学不动了?可能方法不太对-Grid 网格布局

摘要：前情提要本人是一个学渣非科班入行年了吧前端东西真的好多啊又不断更新需要不断的学学学在去年年底开始我就开始不断的寻找学习的方法如何更加高效的学习如何才能学的又快又好在这半年来不断的总结慢慢找到了一些方法和诀窍此文章不是网格布局的教学文章只前情提要本人是一个学渣,非科班入行2年了吧,前端东西真的好多啊,又不断更新.需要不断的学学学, showImg(https://user-gold-c...

happyfish 2019-05-22 16:41 评论0 收藏0
css grid布局入门

摘要：简介网格布局又称网格，是一种二维网格布局系统。在处理网页布局方面一直做的不是很好。网格容器中的所有子元素就会自动变成网格项目网格线组成网格线的分界线。简介 CSS网格布局（又称网格），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好。一开始我们用的是table（表格）布局，然后用float(浮动)，position（定位）和inline-block（行内块）布局，但是...

wzyplus 2019-08-29 17:06 评论0 收藏0