CSS Grid 布局入门实战-模仿Windows 11 快速布局窗口

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

首先，使用过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%;
}

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

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

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

TML+CSS+JS自主设计弹出窗口的方法，在线编辑器

html怎么弹出一个小窗口

html弹出一个小窗口的方法可能有很多，就比如本站（笨鸟工具-璞玉天成，大器晚成）的导航栏点击之后会有一个小窗口（小页面）弹出，然后文章页面的底部有两个小图标，当鼠标悬放在上面的时候，也可以弹出一个小窗口，然后点击下方实例代码的试一试按钮，也可以弹出一个小窗口，是本站提供的HTML+css+javascript的在线编辑器。这里介绍的一简单的方法和一种自主设计的方法，不需要很复杂的程序设计，也不需要框架，用javascript和css就可以：

HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器

自主设计html弹出小窗口的方法

这个方法需要结合html、css和javascript三种语言，即web三件套全得用上。该方法的原理就是将本来的窗口的style中display设置为none，当点击按钮之后，设置为block，并为该窗口绑定位置，实例代码如下：

<div id="ck1"><p style='text-align:center;line-height:80px;'>这个窗口，可以说是自己设计的了，可以在这里添加其它的标签和功能</p></div>
<button class='btn btn-default' onclick='show2()'>点击弹出自己设计的小窗口</button>
<style>
  #ck1{display:none;position:fixed;top:20%;left:20%;width:50%;height:80px;z-index:9999;background-color:skyblue;border-radius:5px;}
</style>
<script>
  function show2(){
  	document.getElementById("ck1").style.display = "block";
  }
</script>

HTML+CSS+JS自主设计弹出窗口的方法，在线编辑器

代码解析

这个自主设计的方法中，除了display属性的设置之外，另一个关键点在于z-index值的设置，html元素的排列堆叠，不仅有水平方向、竖直方向，还有深度方向，就像立体的直角坐标系当中，不仅有x轴、y轴，还有z轴，即z-index的设置可以修改div或html元素的z轴位置。

HTML+CSS+JS在线编辑器可以参考原文

原文地址：html怎么弹出一个小窗口，自主设计方法，在线编辑器 - HTML教程

击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

大家好！我是/小郑搞码事/的小郑

今天和大家分享一下JS如何操作浏览器窗口。只讲如何打开一个新窗口

先来看效果图

上面这个图界面效果就是我们要实现的。

我们常常需要创建一个新窗口，用来向用户显示额外的信息，同时又避免他们正在阅读的信息消失。从实现方案上来看，尽管我们可以用HTML打开一个新的浏览器窗口，但是使用JavaScript可以对新窗口的内容和特性进行更多的控制。

接下来，我们看一下怎么实现的

一、定义窗口打开函数

定义一个打开新窗口的函数newWindow。如上面代码所示，变量catWindow包含一个新的窗口对象，这个对象引用图像文件icon.png，这个新窗口的名称是catWin，必须设置名称，因为我们以后可能希望在a或另一个脚本中引用这个窗口。新窗口的宽度是350像素，高度是260像素，位置是左边400，上边400。

二、写一个调用函数

页面中，包含一个onload事件处理程序，它调用newWinLinks函数，newWinLinks循环遍历页面上的a，检查是否有任何a包含class属性值newWin。如果有，就设置这个a元素的onclick事件处理程序，从而，当点击这个a时，调用newWindow函数。

总结一下

需要注意两个地方：

1、newWindow中，在宽度和高度参数中的逗号之间不能有任何空格，如果有空格，那么脚本可能在某些浏览器中无效，总地来说，当脚本出现错误，需要进行高度时，要首先查找这样的小问题。

2、比如向窗口中添加参数时，希望窗口具有工具栏，地址栏，滚动条

toolbar=yes,location=yes,scrollbars=yes

参数默认是no，可以不填。当然浏览器上表现也有不同，需要知道。

在线咨询

上一篇：用node.js实现一个网页爬虫
下一篇：Top microsoft-窗口置顶工具推荐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商