如何设置Grid Layout （网格布局）列的最小宽度

PHP中文网 JavaScript 百度已收录

当前第2页 返回上一页

grid-column-minimum-width.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html><html><head>

  <meta charset="utf-8" />

  <title></title>

  <link rel="stylesheet" href="grid-column-minimum-width.css" />

</head>

<body>

  <div class="Container">

    <div class="GridItem1">内容1</div>

    <div class="GridItem2">内容2</div>

    <div class="GridItem3">内容3</div>

    <div class="GridItem4">内容4</div>

    <div class="GridItem5">内容5</div>

    <div class="GridItem6">内容6</div>

    <div class="GridItem7">内容7</div>

    <div class="GridItem8">内容8</div>

  </div>

</body>

</html>

说明：

网格列的宽度由CSS文件中Container类的grid-template-columns来设置的。
由于描述了四个值，因此网格是四列。它左起有以下值。

160px

minmax（160 px，1 fr）

160px

160px

第2列以外都设置了160像素的固定值，是固定的宽度。第二列为minmax（160 px，1 fr），最大列宽为1 fr，最小列宽是160像素。因为指定了1 fr，所以列队的宽度会扩大到框架的宽度。

根据以下的设置，在窗口宽度上显示网格的框，1，3，4列是用160像素宽度显示的，第2列能伸缩的动作。

1

grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

2345截图20181129133728.png

缩小窗口宽度。第2列以外是固定宽度，第2列的宽度缩小，如下图所示。

2345截图20181129134103.png

宽度缩小到160像素，这是第二行的最小宽度。

2345截图20181129134440.png

此外，如果缩短窗口宽度，则无法进一步缩小宽度，因此将显示左右滚动条。

2345截图20181129135009.png

以上就是如何设置Grid Layout （网格布局）列的最小宽度的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

css中grid布局和表格有什么区别

浅谈css3 grid网格布局（display: grid）的用法

css grid布局是什么？grid布局的基本介绍

浅谈css grid比bootstrap更适合创建布局的原因

flex布局和grid布局实例分享

如何设置grid layout （网格布局）列的最小宽度

css网格布局（grid）的常用属性介绍

更多相关阅读请进入《grid》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...