前言本文将使用Vue完成九宫格拖拽效果，同时介绍网格布局。具体代码和demo可以点击以下超链接进入传送门：Demo和完整代码连接效果示例Grid布局（gridlayout）的简单理解什么是gridlayoutCSS网格布局（又称“网格”），是二维网格布局系统。CSS并不总是擅长处理网页布局。一开始我们用table（表格）布局，后来用float（浮动）、position（定位）和inline-block（内联块）布局，但这些方法本质上都是hack，缺少很多功能，比如垂直居中。后来又出了flexbox（盒子布局），解决了很多布局问题，但只是一维布局，不是复杂的二维布局。事实上，它们（flexbox和grid）可以很好地结合使用。网格布局是第一个专门为解决布局问题而创建的CSS模块。简单说一下网格布局display的属性：grid：生成块级网格inline-grid：生成内联网格subgrid：如果网格容器本身是Griditem（嵌套网格容器），该属性用于继承列和行其父网格容器的大小。grid-template-columns设置网格列大小grid-template-rows设置网格行大小grid-template-areas设置网格区域grid-column-gap设置网格列间距grid-row-gap设置网格行间距grid-gap缩写grid-gap:justify-items水平对齐（这里只是简单说明）start:leftalignmentend:rightalignmentcenter:centeralignmentstretch:Fill(default)align-itemsverticalalignmentstart:topalignmentend:bottomalignmentcenter:centeralignmentstretch:fill(default)当然看不懂也没关系，这里有一篇我很喜欢的网格布局文章。它被描述得很详细。可用于深入研究网格布局内容。传送门：网格布局指南Vue实现九宫网格拖动Demo地址：实现九宫网格布局的Demo及完整代码/*css*/.container{position:relative;/*实现定位，使滑块相对于this定位*/display:grid;/*定义网格布局*/width:300px;高度：300px；网格模板列：100px100px100px；-areas:"head1head2head3"/*定义每个格子的名称，方便计算*/"main1main2main3""footer1footer2footer3";边框：1px实心#000；保证金：0自动；}.block{位置：绝对;/*相对于容器定位*/width:100px;高度：100px；显示：弹性；/*flex布局，使文本居中*/justify-content:center;证明项目：中心；对齐项目：居中；对齐内容：居中；用户选择：无；/*用户不能选择文本*/background:olivedrab;border:1pxsolid#000}//app.vue{{positionX}}{{positionY}}
