登录  /  注册

CSS3 网格布局(grid layout)基础知识

php中文网
发布: 2016-06-24 11:28:53
原创
1820人浏览过

网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道,构成显式网格。 

当网格项目定位在这些界限之外,网格容器通过增加隐式网格线生成隐式网格轨道。 

这些隐含的和显式的网格线一起构成隐式网格(implicit grid)。 

隐式网格轨道的尺寸由网格自动行(grid-auto-rows)和网格自动列(grid-auto-columns)属性来确定。


网格自动流(grid-auto-flow)属性用来控制无明确位置的网格项的自动定位(auto-placement), 

一旦显式网格被填满(或者如果没有显式的网格),auto-placement也将导致隐式网格轨道的生成。

自动生成行和列的尺寸:grid-auto-rows 和 grid-auto-columns 属性



如果一个网格项被放到一个未明确定义尺寸的行或列中,隐式网格轨道将被创建来容纳它。 

这在两种情况下会发生:通过显式定位到一个超出范围的行或列中,或是由自动定位算法创建额外的行或列。 

网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。


我们仍然通过实例来学习这个属性的用法:

#grid {    display: grid;    grid-template-columns: 20px;    grid-template-rows: 20px }  #A { grid-column: 1;          grid-row: 1; }  #B { grid-column: 5;          grid-row: 1 / span 2; }  #C { grid-column: 1 / span 2; grid-row: 2; }
登录后复制

<div id="grid">  <div id="A">A</div>  <div id="B">B</div>  <div id="C">C</div>
</div>
登录后复制

如果一个网格项被放到一个未明确定义尺寸的行或列中,隐式网格轨道将被创建来容纳它。 

这在两种情况下会发生:通过显式定位到一个超出范围的行或列中,或是由自动定位算法创建额外的行或列。 

网格自动列和网格自动行属性用来指定这样的隐式创建的轨道的大小。


上面这个例子演示了隐式网格轨道的使用。本例中共创建了2行5列,其中显式声明的只有第1行/第1列,除此之外有1个隐含行和4个隐含列。 

网格项B位于网格线5,这将自动创建4个隐式网格列,但是由于列3和4中没有任何网格项,所以其宽度塌缩为0。


你可以通过 在线实例自己测试下。(请使用Chrome打开)

注意:由于网格布局是制定中的W3规范,所以浏览器尚未完全支持,目前Chrome已支持。

自动布局:网格自动流(grid-auto-flow)属性



未明确指定位置的网格项将通过自动定位算法来自动放置到网格容器的未占用空间中。 

网格自动流就是用来控制自动布局算法如何工作的,指定如何把自动布局的网格项放进网格中。


row
自动布局算法把网格项按顺序填充到每一行,必要时添加新行。这是grid-auto-flow的缺省值。
column
自动布局算法把网格项按顺序填充到每一列,必要时添加新列。
dense
如果指定了dense,将使用“密集”填充算法,它试图把排在后面的体积小的网格项填充到“大个头”网格留下的空隙中,就像我们在汽车后备箱塞物品一样。这有可能会导致填充顺序和代码顺序不同。
如果未指定,则将使用“稀疏”填充算法,只是按顺序摆放,不回溯填空。这可以确保所有网格项保持原有的代码序,但有可能会出现页面空间浪费。


同样的我们通过 在线实例来学习。其中代码注释已经讲得很清楚,这里不再重复。


by iefreer

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号