首页 > web前端 > 前端问答 > css如何设置指定网格的大小和位置

css如何设置指定网格的大小和位置

醉折花枝作酒筹
发布: 2021-08-13 17:36:16
原创
3417 人浏览过

上一篇文章中我们了解了定义网格线大小的方法,请看《css如何定义网格线大小》。这次我们来了解一下设置指定网格的大小和位置的方法,有需要的可以参考参考。

之前我们去了一个如何去定义网格线的大小,这次来点不一样的。我们来看看一个小栗子。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<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>

登录后复制

这个小例子的结果是

49COYFYL0JT)TNL@[2_O$45.png

这个例子与上一篇文章的例子极为相似,都是300*300的盒子里,都是有几个盒子,不同的可能就是这次只有8个盒子,而上一次有9个盒子吧。还有什么不同吗?我们看一下一号小盒子,它是不是多占了一个小格子,难怪没有了9号小盒子。

那我们来看一下是什么属性导致的吧。

grid-row 属性是一种 grid-row-start (en-US) 和 grid-row-end (en-US) 的缩写(shorthand)形式,它定义了网格单元与网格行(row)相关的尺寸和位置,可以通过在网格布局中的基线(line),跨度(span),或者什么也不做(自动),从而指定 grid area 的行起始与行结束。

如果指定了两个 值,那么斜杠号前的值就被指定为 grid-row-start,斜杠后面的值就被指定为 grid-row-end 的值。

它是以下属性的简写属性:

  • grid-row-start

  • grid-row-end

我们来看看这个属性的语法格式。

1

grid-row: grid-row-start / grid-row-end;

登录后复制

其中grid-row-start代表着从哪行开始显示项目;grid-row-end代表着在哪条行线上停止显示项目,或者横跨多少行。

需要注意的是:

IE11 不支持网格单元的自动布置。除非显式地注释 -ms-grid-column 和 -ms-grid-row,否则所有单元都会在网格的第一行/列结束。

推荐学习:css视频教程

以上是css如何设置指定网格的大小和位置的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
css
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板