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

时间：2021-08-26 来源：互联网

今天PHP爱好者给大家带来css如何设置指定网格的大小和位置的教程，上一篇文章中我们了解了定义网格线大小的方法，请看《css如何定义网格线大小》。这次我们来了解一下设置指定网格的大小和位置的方法，有需要的可以参考参考。希望对大家有所帮助。

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

<style>
      article {
          display: grid;
          width: 300px;
          
          grid-template-rows: repeat(3,1fr);
          grid-template-columns: repeat(3,1fr);
      }
      p{
          background: rgb(208, 159, 255);
          background-clip: content-box;
          border: solid 1px rgb(208, 159, 255);
          padding: 10px;
      }
      p:first-child{
        grid-row: 1 / span 2;
      }
    </style>
  </head>
  <body>
    <article>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
    </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-line> 值，那么斜杠号前的值就被指定为 grid-row-start，斜杠后面的值就被指定为 grid-row-end 的值。

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