网格
的示例
的示例
隐式网格
如果将258改成10或更小的数值,你就会发现网格中的文字溢出了
隐式网格的存在就是为了处理这个问题,若你不设置这个值,使用默认值也不会出现溢出的情况.也可以将隐式网格的属性设置成minmax() 意思是最小100px,超出自动扩容.
译者注：简单来说，隐式网格就是为了放显式网格放不下的元素，浏览器根据已经定义的显式网格自动生成的网格部分。
自动使用多列填充
为grid里面放置元素的方式
- 使用基于线的元素放置
- 使用grid-template-areas属性+属性.
我们的网格有许多分隔线，第一条线的起始点与文档书写模式相关。在英文中，第一条列分隔线（即网格边缘线）在网格的最左边而第一条行分隔线在网格的最上面。而对于阿拉伯语，第一条列分隔线在网格的最右边，因为阿拉伯文是从右往左书写的。
我们根据这些分隔线来放置元素，通过以下属性来指定从那条线开始到哪条线结束。
- grid-column
- grid-row
注意开始与结束的线的序号要使用符号分开。
也可以用 来定位到最后一条列分隔线或是行分隔线，并且可以用负数来指定倒数的某一条分隔线。但是这只能用于显式网格.
属性的使用规则如下：
- 你需要填满网格的每个格子
- 对于某个横跨多个格子的元素，重复写上那个元素属性定义的区域名字
- 所有名字只能出现在一个连续的区域，不能在不同的位置出现
- 一个连续的区域必须是一个矩形
- 使用符号，让一个格子留空
个人使用总结体验,基于线元素的放置更加灵活一些,但是基于grid-template-areas放置更加直观一些.
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/23313.html