css如何定义网格线大小
我们先来看一个小栗子。
<style> article { display: grid; width: 300px; height: 300px; grid-template-rows: repeat(3,1fr); grid-template-columns: repeat(3,1fr); } div{ background: rgb(208, 159, 255); background-clip: content-box; border: solid 1px rgb(208, 159, 255); padding: 10px; } </style> </head> <body> <article> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </article> </body>
这个小例子的结果是
可以看到,我们通过改了属性的值,将原本十分漂亮的布局变成了不是特别好看的一个布局。那我们改变了什么属性呢?通过观察可以看到,改变了grid-template-rows
和grid-template-columns
的属性值。
那我们来看一下这两个属性吧。
grid-template-columns属性是基于 网格列. 的维度,去定义网格线的名称和网格轨道的尺寸大小。这些值是一个用空格分隔的列表,其中每个值指定相应列的尺寸。
语法格式是
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
这是这个属性值的具体介绍。
none:这个关键字表示不明确的网格。所有的行和其大小都将由grid-auto-rows 属性隐式的指定。
max-content:是一个用来表示以网格项的最大的内容来占据网格轨道的关键字。
min-content:是一个用来表示以网格项的最大的最小内容来占据网格轨道的关键字。
auto:如果该网格轨道为最大时,该属性等同于 <max-content> ,为最小时,则等同于 <min-content> 。
grid-template-columns属性看过了之后,我们去看另外一个属性grid-template-rows。
grid-template-rows 规定网格布局中的行数(和高度)。值是用空格分隔的列表,其中每个值指定相应行的高度。
再来看看这个属性的语法格式。
grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;
发现这个属性的值和上一个属性的值一模一样,这样我们就不用记那么多了。我们来看一下简洁版本
推荐学习:css视频教程
以上就是css如何定义网格线大小的详细内容,更多请关注其它相关文章!
上一篇: 案例分享转盘抽奖的demo(附代码)
下一篇: PHP八大设计模式具体有哪些?
推荐阅读
-
如何自定义QMessageBox的窗口大小
-
WPF 如何在静态资源定义字体大小
-
WPS如何添加网格线以及对默认的网格线大小进行调整
-
如何自定义CSS滚动条的样式?
-
Excel如何在分页预览视图下调整页面对页面大小进行自定义设置
-
如何取消div定义块与屏幕右侧的缝隙,求大神指导_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
如何设置
- 的点的大小,颜色,以及和文字的距离?_html/css_WEB-ITnose
-
div如何设置才能适应屏幕大小的变化?_html/css_WEB-ITnose