CSS网格大小怎样定义 用啥属性
|
今天这篇给大家分享的知识是“CSS网格大小怎样定义，用什么属性”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“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; } div:first-child{ grid-row: 1 / span 2; } </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> </article> </body> 这个例子与上一篇文章的例子极为相似，都是300*300的盒子里，都是有几个盒子，不同的可能就是这次只有8个盒子，而上一次有9个盒子吧。还有什么不同吗？我们看一下一号小盒子，它是不是多占了一个小格子，难怪没有了9号小盒子。 那我们来看一下是什么属性导致的吧。 grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写（shorthand）形式，它定义了网格单元与网格行（row）相关的尺寸和位置，可以通过在网格布局中的基线（line），跨度（span），或者什么也不做（自动），从而指定 grid area 的行起始与行结束。 如果指定了两个 <grid-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。 它是以下属性的简写属性： grid-row-start grid-row-end 我们来看看这个属性的语法格式。 grid-row: grid-row-start / grid-row-end; 其中grid-row-start代表着从哪行开始显示项目；grid-row-end代表着在哪条行线上停止显示项目，或者横跨多少行。 需要注意的是： IE11 不支持网格单元的自动布置。除非显式地注释 -ms-grid-column 和 -ms-grid-row，否则所有单元都会在网格的第一行/列结束。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
