CSS栅格系统的网格线大小粗细怎样设置？-群英

CSS栅格系统的网格线大小粗细怎样设置？

PHP中文网发表于 2021-09-06 17:47 次浏览

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 网格线

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：CSS栅格系统的网格线位置怎样设置？

下一篇：CSS如何相对原点位置来定位背景图？