grid

最新推荐文章于 2022-10-13 18:45:00 发布

weixin_30412167

最新推荐文章于 2022-10-13 18:45:00 发布

阅读量54

点赞数

原文链接：http://www.cnblogs.com/dal3546/p/9854425.html

版权

.game-board div 是网格容器，而 .box div 是网格项。现在我们将通过 Grid 布局来实现 3×3 布局。

CSS 代码:.game-board { display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px 200px;}

在这里，我还使用了其他两个属性。 grid-template-rows 属性允许我们指定网格中的行数及行的高度。

grid-template-columns 属性允许我们指定网格中的列数及列的宽度。您可以指定任何单位的尺寸大小，包括像素，百分比和其他单位fr.

fr 单位(等分)

fr 是为网格布局定义的一个新单位。它可以帮助你摆脱计算百分比，并将可用空间等分。

例如，如果在网格容器中设置这个规则：grid-template-rows: 2fr 3fr，那么你的网格容器将首先被分成 2 行。然后将数字部分加在一起，这里总和为 5，即 5 等分。

就是说，我们将有 2 行：第一排占据垂直空间的 2/5 。第二排占垂直空间的 3/5 。

回到我们的 Tic-Tac-Toe 例子，我们使用 fr 代替 px。我们想要的是，应该有3行3列。所以，我们只需要用 3 个 1fr 替换 3 个 200px 即可：

CSS 代码:.game-board { display: grid; grid-template-row

HTML5＋CSS制作Grid网格布局入门及源码

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.wrapper div{
    background-color: aquamarine;
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}
</style>
<body>
    <div class="wrapper">
      <div class="one">One</div>
      <div class="two">Two</div>
      <div class="three">Three</div>
      <div class="four">Four</div>
      <div class="five">Five</div>
      <div class="six">Six</div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/dal3546/p/9854425.html

weixin_30412167

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
grid

.game-board div 是网格容器，而 .box div 是网格项。现在我们将通过 Grid 布局来实现 3×3 布局。CSS 代码:.game-board { display: grid; grid-template-rows: 200px 200px 200px; grid-template-columns: 200px 200px 200px;}在这里，我还使用了其...
复制链接

扫一扫

grid

“相关推荐”对你有帮助么？