理解css中Grid布局,在项目中如何实现grid页面布局

时间: 2017-11-28阅读: 2046标签: 布局

简介

css中Grid是一种二维网格式布局方式。我们常规使用table、float、position、inline-block等布局,但它们遗漏了很多功能,例如垂直居中。后来css3中flexbox的出现解决了很多布局问题,但是它也是一维布局,而不是复杂的二维布局,Grid是为了解决二维布局问题而创建的CSS模块。


使用Gird的好处

1.布局清晰明了,摆脱了模板中使用不同标签下基于浮动,定位的手动计算过程。

2.类似于talbe布局,不同点在于Gird在css中实现,而table在html中实现;同时gird可以根据媒体查询定义不同的上下文,有利于网页响应式设计。

3.摆脱传统布局中文档流的限制,这也意味着可以自由地更改页面元素在html中的位置。


Gird在浏览器的兼容性


从图上可以看出,支持Gird布局的浏览器并不多,IE10以上才支持部分属性,如果想体验Grid布局的强大,推荐使用开通过“体验新功能”的Chrome, Opera 或 Firefox, Chrome:打开浏览器,输入chrome://flags,找到”experimental web platform features”,启用并重启浏览器;Opera:输入opera://flags,与Chrome一样;Firefox:输入layout.css.grid.enabled。

由于Gird兼容性和灵活性不是很高,这就造成了网站上的使用率并不高的原因,当然如果非要使用它又需要向后支持,我们可以利用@supports方法来渐进式增强。


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>

效果如下:


源码说明:

一、设置在网格容器上的属性

1. display: grid | inline-grid | subgrid;

属性值:

grid: 生成块级网格
inline-grid: 生成行内网格
subgrid: 如果网格容器本身是网格项(嵌套网格容器),此属性用来继承其父网格容器的列、行大小。
注:当元素设置了网格布局,column、float、clear、vertical-align属性无效。

2. grid-template-columns: <track-size> ... | <line-name> <track-size> ... ;
grid-template-rows: <track-size> ... | <line-name> <track-size> ... ;

设置行和列的大小,在行轨道或列轨道两边是网格线。

属性值:

track-size: 轨道大小,可以使用css长度,百分比或用分数(用fr单位)。
line-name: 网格线名字,你可以选择任何名字。


3.grid-template-areas 

 通过获取网格项中的grid-area属性值(名称),来定义网格模版。重复网格区(grid-area)名称将跨越网格单元格,‘.’代表空网格单元。 

 属性值: 

grid-area-name: 网格项的grid-area属性值(名字)
 ‘.’ : 空网格单元 
none: 不定义网格区域  


4. grid-column-gap:<line-size>; 和 grid-row-gap: <line-size> ;

网格单元间距。

属性值:

line-size: 网格线间距,设置单位值。

注:间隔仅仅作用在网格单元之间,不作用在容器边缘。


5. grid-gap:<grid-column-gap> <grid-row-gap>; 

 是grid-column-gap 和 grid-row-gap简写,

注:如果只设置一个值,那么grid-column-gap 和 grid-row-gap都为那个值。


6. justify-items: start | end | center | stretch(默认) ;

垂直于列网格线对齐,适用于网格容器里的所有网格项。

属性值

start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满(默认)。


7. align-items: start | end | center | stretch ;

 垂直于行网格线对齐,适用于网格容器里的所有网格项。

 属性值: 

start: 顶部对齐。 
end: 底部对齐。
center: 居中对齐。
stretch:填满(默认)。


8. justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于列网格线对齐)。

属性值:

start: 左对齐。
end: 右对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。


9. align-content: start | end | center | stretch | space-around | space-between | space-evenly ;

如果用像px非弹性单位定义的话,总网格区域大小有可能小于网格容器,这时候你可以设置网格的对齐方式(垂直于行网格线对齐)。

属性值:

start: 顶部对齐。
end: 底部对齐。
center: 居中对齐。
stretch: 填满网格容器。
space-around: 网格项两边间距相等,网格项之间间隔是单侧的2倍。
space-between: 两边对齐,网格项之间间隔相等。
space-evenly: 网格项间隔相等。


10. grid-auto-columns: <track-size> ... ; 和 grid-auto-rows: <track-size> ... ;

自动生成隐式网格轨道(列和行),当你定位网格项超出网格容器范围时,将自动创建隐式网格轨道。

属性值:

track-size: 网格轨道大小,可以是固定值,百分比或者是分数(fr单位)。



11. grid-auto-flow : row(默认) | column | dense ;

在没有设置网格项的位置时,这个属性控制网格项怎样排列。

属性值:

row: 按照行依次从左到右排列。
column: 按照列依次从上倒下排列。
dense: 按先后顺序排列。


12. grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];

是一种简写形式,设置网格容器所有属性。

属性值:

none: 设置为所有属性的默认值。
<grid-template-rows> / <grid-template-columns>: 设置行和列的值,其他属性为默认值。
<grid-auto-flow> [ <grid-auto-rows> [ / <grid-auto-columns>] ] : 设置网格自动流、网格自动行、网格自动列的值,其他未设置则为默认值。


二、设置在网格项上的属性

1. grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
    grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
    grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
    grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

通过网格线来定义网格项的位置。grid-column-start、grid-row-start定义网格项的开始位置,grid-column-end、grid-row-end定义网格项的结束位置。

属性值:

line: 指定带编号或者名字的网格线。
span <number>: 跨越轨道的数量。
span <name>: 跨越轨道直到对应名字的网格线。
auto: 自动展示位置,默认跨度为1。

注:如果未声明grid-column-end或grid-row-end,默认将跨越一个轨道。项目也可以重叠,设置z-index来确定堆叠顺序。


2. grid-column: <start-line> / <end-line> | <start-line> / span <value> ;
   grid-row: <start-line> / <end-line> | <start-line> / span <value> ;
是 grid-column-start、grid-column-end 和 grid-row-start、grid-row-end 的简写。


3. grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end> ;

定义网格项名字,以便创建模块(容器属性grid-template-areas来定义模块)。

属性值:

name: 项目名子。
<row-start> / <column-start> / <row-end> / <column-end>: 可以是数字或网格线名字。



4. justify-self: justify-self: start | end | center | stretch;
定义单个网格项垂直于列网格线的对齐方式。
属性值:

start: 网格区域左对齐。
end: 网格区域右对齐。
center: 网格区域居中。
stretch: 网格区域填满。

提示:也可以在容器上设置justify-items,达到全部网格项对齐。


5. align-self: start | end | center | stretch;

定义单个网格项垂直于行网格线的对齐方式。

属性值:

start: 网格区域顶部对齐。
end: 网格区域底部对齐。
center: 网格区域居中。
stretch: 网格区域填满。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/181

关闭

CSS:BFC规则的应用自适应两栏布局

两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。

瀑布流的实现

现在很多网站都会使用瀑布流的一个效果,什么是瀑布流呢,用在哪些地方呢?大概就是这样的一个效果,一般用于无法保证图片大小的网站。先看下布局+css

css 浮动布局,清除浮动

浮动的特性:(1)浮动元素有左浮动(float:left)和右浮动(float:right)两种(2)浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来

CSS自定义属性+CSS Grid网格实现超级的布局能力

我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

css页面常用布局技巧

居中布局;水平居中(宽度自适应);垂直居中(高度自适应);水平垂直居中;多列布局;左边定宽,右边自适应;左边不定宽,右边自适应;等宽布局;等高布局

css3 弹性盒布局的使用-Flex

css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器

移动端web自适应适配布局解决方案

100%还原设计图,要注意: 看布局,分析结构。感觉难点在于:1.测量精度(ps测量数据);2.文字的行高。自动适应屏幕宽度 :网页的宽度默认等于屏幕的宽度

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

符合SEO的HTML布局规范

少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容;在<body>..</body>标签区中的罗列,都是一些基础的HTML标签,这些标签出现的次序是可以变化的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!