hi，朋友，您来啦。带上小板凳，我们一起聊一聊今天的话题。

首先，使用过Windows 11的朋友，可能使用过窗口布局功能。那么，如何通过Grid布局实现此功能呢？

网格布局容器

采用网格布局的区域，一般称为“容器”。在容器内部通过网格定位的子元素，一般称为“项目”。

display: grid | inline-grid;

HTML

<div class="grid">
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
</div>

CSS

.grid{display: grid;}

CSS

.grid{display: inline-grid;}

定义列宽与行高

在指定容器为网格布局以后，采用 grid-template-columns 定义每一列的列宽，采用 grid-template-rows 定义每一行的行高。

grid-template-columns: <length> | minmax(min, max) | auto | repeat | ...

grid-template-rows: <length> | minmax(min, max) | auto | repeat | ...

HTML

<!-- 定义一个4列、多行的界面。 -->
<div>
    <div class="grid">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>
<div>
    <div class="grid grid-repeat">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

<div>
    <div class="grid grid-fr">
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>

        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
        <div class="grid-item"></div>
    </div>
</div>

CSS（多种写法，效果基本一致。）

.grid{
    display: inline-grid;
    background-color: #212121;
    padding:5px;
    /*写法1*/
    grid-template-columns: 10px 30px 10px 30px;
    grid-template-rows: 15px 30px;
    grid-gap:10px;
}

.grid-repeat{
    background-color: rgb(140, 139, 139);
    /*写法2*/
    grid-template-columns: repeat(2, 10px 30px);
    grid-template-rows: repeat(2, 15px 30px);
}

.grid-fr{
    background-color: rgb(193, 193, 193);
    /*写法3 取决于容器宽度*/
    grid-template-columns: 1fr 3fr 1fr 3fr;
    /*取决于容器高度*/
    grid-template-rows: 1fr 2fr;
}

.grid-item{
    background-color: #ddd;
    min-width: 10px;
    min-height:15px;
}

行间距、列间距

grid-gap: row col | row-col | 20px 20px | 20px; 分别定义行列或同时定义行列间距；

grid-row-gap: 20px; 单独定义行间距

grid-column-gap: 20px; 单独定义列间距

网格区域

grid-template-areas: <string>+

Windows11 窗口布局功能模拟

CSS

.window-layout-select{
  position: absolute;right:0;z-index: 1009;padding:5px;
  background-color: #212121;border-radius: 4px;
  grid-template-columns: repeat(2, 20px) 0 repeat(6, 6.6667px) 0 repeat(12, 3.3333px);
  grid-template-rows: 30px 0 15px 15px;
  grid-gap:2px;
  grid-template-areas: 
    "a b . c c c c d d . e e e e f f f f g g g g"
    ". . . . . . . . . . . . . . . . . . . . . ."
    "h i . j j j k k k . l l l m m m m m m n n n"
    "h o . p p p q q q . l l l m m m m m m n n n";
  display: none;
}
.window-layout-select>div{background-color: #ddd;cursor: pointer;}
.window-layout-select>div:hover{background-color:aqua;}
.radius.top.left{border-top-left-radius:4px;}
.radius.top.right{border-top-right-radius:4px;}
.radius.bottom.left{border-bottom-left-radius:4px;}
.radius.bottom.right{border-bottom-right-radius:4px;}

.item-a {grid-area: a;}
.item-b {grid-area: b;}
.item-c {grid-area: c;}
.item-d {grid-area: d;}
.item-e {grid-area: e;}
.item-f {grid-area: f;}
.item-g {grid-area: g;}
.item-h {grid-row: 3 / 5;}
.item-i {grid-area: i;}
.item-j {grid-area: j;}
.item-k {grid-area: k;}
.item-l {grid-area: l;}
.item-m {grid-area: m;}
.item-n {grid-area: n;}
.item-o {grid-area: o;}
.item-p {grid-area: p;}
.item-q {grid-area: q;}

/*demo*/
.demo{
    display: grid;right:40%;top:25%;
}

关注作者：关注有趣的网页布局。

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，让我们一起加油吧。