当前位置：首页 → php教程> css如何定义网格线大小

css如何定义网格线大小

时间：2021-08-26

来源：互联网

标签：

在手机上看

手机扫描阅读

今天PHP爱好者给大家带来css背景方面的知识我们已经学的差不多了，接下来我们来看一下栅格系统的知识。有需要的小伙伴可以参考参考。希望对大家有所帮助。

我们先来看一个小栗子。

<style>
      article {
          display: grid;
          width: 300px;
          height: 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;
      }
    </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>
      <p>9</p>
    </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;

发现这个属性的值和上一个属性的值一模一样，这样我们就不用记那么多了。我们来看一下简洁版本

YOR`H7}}QMD8$$DU}4_RJIY.png

以上就是css如何定义网格线大小的详细内容，更多请关注php爱好者其它相关文章！

今日更新

哔哩哔哩官网网页纯净观看入口-哔哩哔哩官网创作中心极速直达
阅读：18
163邮箱登录入口-网易163邮箱网页版一键登录
阅读：18
欧易冷钱包存储比例揭秘安全资产配置关键数据
阅读：18
歪歪漫画免费热榜入口-歪歪漫画爆款热作免费推荐
阅读：18
彭祖之梗是什么梗？揭秘古代养生大师的爆笑网络新梗，看完秒懂！
阅读：18
战网国际服如何快速找回账号-战网国际服账号找回详细方法
阅读：18
欧易语言设置指南：一键切换多语言教程
阅读：18
哔咔漫画极速下载入口-哔咔漫画官方正版安装包安全纯净
阅读：18
outlook邮箱登录入口官网在哪-outlook邮箱登录入口网页版直达
阅读：18
迅雷在线高清观看入口-迅雷在线免费观看完整版
阅读：18

css如何定义网格线大小

今日更新

热门下载