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

妤锋シ发布于2019-08-05 16:56 / 502人阅读

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

栅格布局组成：

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

均分

x:30% auto 30px

grid-row grid-column

更简约写法grid-area

速度快圣诞节看电视剧圣

速度快圣诞节看电视剧圣诞节看电视剧考虑到

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

混合云 idc机房托管 android布局方式更改过域名的公司大数据更强调数据的更便宜的云服务器

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

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

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

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

Half 2019-08-02 16:16 评论0 收藏0
栅格GRID: 未来可期更便捷的布局方式

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

Euphoria 2019-08-30 10:48 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

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

anonymoussf 2019-08-01 17:20 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

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

everfight 2019-08-05 11:46 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

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

gplane 2019-08-29 13:06 评论0 收藏0