资讯专栏INFORMATION COLUMN

栅格GRID: 未来可期 更便捷的布局方式

Half / 3320人阅读

摘要:栅格布局组成父元素和子元素。属性设置父可设置属性或网格模式子元素列的宽度子元素行的高度设置则定高不设则自适应它们俩可设置是百分比也可以自动伸缩等网格区域的间距可设置单一间距也可以上下一个间距左右一个间距。

栅格布局组成:

wrapper(父元素)和 items(子元素)。

属性设置:

父 可设置属性:

display: grid;或display: inline-grid;  /*网格模式*/

grid-template-columns: 40px auto 50px;  
/*子元素列的宽度*/
grid-template-rows: 25% 100px auto; 
/*子元素行的高度 设置则定高 不设则自适应*/
/*它们俩可设置是px 百分比 也可以自动伸缩auto等*/

grid-gap: 5px; 
/*网格区域的间距 可设置单一间距 也可以上下一个间距左右一个间距 。 
不支持上右下左四个值写法*/

子 可设置属性:
不设置一下值是 默认均分。 更多变化 需要用到⤵️

grid-row-start: 2;    /*行 的开始*/
grid-row-end: 3;      /*行 的结束*/

/*上面两句可简写成 grid-row: 2 / 3;*/


grid-column-start: 1; /*列 的开始*/
grid-column-end: 4;   /*列 的结束*/

/*同理上面两句可简写成 grid-column: 1 / 4;*/

------------更简洁写法-----------------------

grid-row-start: 2;    /*行 的开始*/
grid-row-end: 3;      /*行 的结束*/
grid-column-start: 1; /*列 的开始*/
grid-column-end: 4;   /*列 的结束*/

/*上面四句可简写成*/
grid-area:2/1/3/4;   
/*顺序grid-row-start,grid-column-start,grid-row-end,grid-column-end。*/  

理解row和columns的排序 基本就理解grid的用法
例如:
grid-row-start: 2; 指的是从上到下第二条线开始
grid-column-start: 1; 指的是从左到右第一条线开始


DEMO图示:









Grid




    

均分

1
2
3
4
5
6

x:30% auto 30px

1
2
3
4
5
6

grid-row grid-column

1
2
3
4
5
6

更简约写法grid-area

1
2
3
4
速度快圣诞节看电视剧圣
速度快圣诞节看电视剧圣诞节看电视剧考虑到

mark一下 仅供参考 欢迎更正补充 end

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

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

相关文章

  • 栅格GRID: 未来可期 便捷布局方式

    摘要:栅格布局组成父元素和子元素。属性设置父可设置属性或网格模式子元素列的宽度子元素行的高度设置则定高不设则自适应它们俩可设置是百分比也可以自动伸缩等网格区域的间距可设置单一间距也可以上下一个间距左右一个间距。 栅格布局组成: wrapper(父元素)和 items(子元素)。 属性设置: 父 可设置属性: display: grid;或display: inline-grid; /*网格...

    Euphoria 评论0 收藏0
  • 你不需要基于 CSS Grid 栅格布局系统

    摘要:在过去的几个星期里,我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置,或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...

    anonymoussf 评论0 收藏0
  • 你不需要基于 CSS Grid 栅格布局系统

    摘要:在过去的几个星期里,我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置,或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里,我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...

    gplane 评论0 收藏0

发表评论

0条评论

Half

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<