精读《用 css grid 重新思考布局》
时间：2023-03-30 17:42:15
CSS
1介绍与Grid相比，Flex就像一个功能键盘和触摸屏。与功能键盘相比，触摸屏的控制就像一次降维打击，因为功能键盘只能控制上下左右（x，y轴），而触摸屏则打破了布局壁垒并直接从（z轴）接触它。无论UI内部布局多复杂，都可以通过触摸直接定位。Flex是一种一维布局方式。我们需要不断嵌套Div，形成一个复杂的结构。一旦布局发生变化，如果原来的嵌套结构不能“兼容变化”到新的结构中，就需要重构代码。Grid就像一个触摸屏，可以在两个维度上进行布局。即使对布局方式进行了大幅度的调整，也只需少量修改即可适配。这就是为什么要精读Rethinkinglayoutwithcssgrid，了解这种革命性的布局技术给布局乃至代码的逻辑组织带来的变化。2概述作者首先提出了Flex的问题，其实是blockfloatflex三种布局方式的通病：布局结构由Div层级描述，导致Div层级复杂，遇到结构化时难以维护变化。定制能力较弱。Flex布局有一些不受控制的智能设置。例如，宽度为50%的子元素将被同级元素压缩到50%以下。这种智能在某些场景是需要的，但是由于没有像Grid这样的minmax这样的API，所以定制化不够。举个例子，上图的结构使用Flex描述可能是这样的：
RamseyHarper平面设计师Loremipsumdolorsitametconsecteturadipisicingelit。FA转身离去，他最讨厌的控告者确实排斥，让他对你因事物的存在而欠的痛苦的烦恼感到高兴？ 利用HTML嵌套结构，我们将图形垂直分成两个块，然后布局继续嵌套在块内，这是最经典的布局行为在样式文件中，我们需要描述每一层的布局，支持多分辨率灵活布局。包括顶级卡片容器在内的一些样式需要调整：.card{width:80%;保证金：0自动；显示：弹性；弹性方向：列；最大宽度：600px；背景：#005e9b；弹性基础：250px；白颜色;填充：2em；text-align:center;}.profile-info{font-weight:300;opacity:0.7;}.profile-sidebar{margin-right:2em;text-align:center;}.profile-name{字母间距:1px;字体大小：2rem；保证金：0.75em00；line-height:1;}.profile-name::after{content:"";显示：块；宽度：2em；高度：1px；背景：#5bcbf0；边距：0.5em自动0.65em；opacity:0.25;}.profile-position{text-transform:uppercase;字体大小：0.875rem；字母间距：3px；保证金：002em；行高：1；颜色：#5bcbf0；}.profile-img{最大宽度：100%；边界半径：50%；border:2pxsolidwhite;}.social-list{list-style:none;证明内容：空间均匀；显示：弹性；最小宽度：125px；最大宽度：175px；保证金：0自动?;填充：0;}.social-link{颜色：#5bcbf0;opacity:0.5;}.social-link:hover,.social-link:focus{opacity:1;}.bio{padding:2em;柔性;弹性方向：列；证明内容：居中；}@media（最小宽度：450px）{.bio{文本对齐：左；最大宽度：350px；}}.bio-title{颜色：#0090d1;字体大小：1.25rem；字母间距：1px；文本转换：大写；行高：1；边距：0；}.bio-body{颜色：#555；}.profile{显示：flex；align-items:flex-start;}@media(min-width:450px){.card{flex-direction:row;文本对齐：左；}.profile-name::after{margin-left:0;让我们看看Grid是如何做到的！Grid有很多API。让我们关注属性grid-template-areas。使用它，我们可以直接用平铺的方式描述它，而不用关心模块的HTML结构：
>/i>RamseyHarper平面设计师干得好开发者做从那时起，他最讨厌的控告者确实是排斥，就让它成为你欠世间万物的烦恼的痛苦吧？ 可以看出，使用Grid可以将UI结构从HTML结构中分离出来，HTML结构只是描述关系，我们只需要在样式文件中描述具体的UI结构即可样式文件只截取Grid的相关部分：.card{width:80%;保证金：0自动；显示：弹性；弹性方向：列；最大宽度：600px；背景：#005e9b；弹性基础：250px；白颜色;填充：2em；文本对齐：左；显示：网格；网格模板列：1fr3fr；网格列间隙：2em；grid-template-areas:"imagename""imageposition""socialdescription";}.profile-name{grid-area:name;}.profile-position{grid-area:position;}.profile-info{grid-area:description;}.profile-img{grid-area:image;}.social-list{grid-area:social;}可见grid-template-areas是一种更进一步的抽象语法，通过直观的文字描述页面结构，更容易理解和修改。这种描述方式在适应不同分辨率方面也有优势，只要重构grid-template-areas即可：@media(min-width:600px){.card{text-align:left;网格模板列：1fr3fr；grid-template-areas:"imagename""imageposition""socialdescription";}}归根结底，Grid是通过二维结构描述来控制子元素对父元素的布局，让布局描述更加直观。最后，作者还提到了Flex还是有使用场景的，就是简单的一维结构，或者是Flex特有的语法如space-between。所以整体和复杂的二维布局推荐使用Grid，简单的一维布局推荐使用Flex。3精读Grid的布局思路，给了我很多启发。HTML结构和UI结构的分离有助于减少DIV的层级结构，让代码看起来更清晰。可能有人会疑惑，Grid无非是把HTML布局的一些功能移到了CSS上，整体的复杂度应该是不变的。其实从grid-template-areasAPI中我们可以看出，Grid不仅将布局功能抽取到CSS中，还将布局描述抽象出来，让代码更易于维护。抽象，抽象为什么Grid可以将布局抽象出来？由于Grid将二维结构掌握在手中，因此具有更强的布局能力，可以进一步将结构化语法抽象为字符串描述。抽象的好处是不言而喻的。你认为哪个更具可读性，一堆嵌套的DIV还是下面的代码？.card{grid-template-areas:"imagename""imageposition""socialdescription";}这就是抽象的好处。一般来说，代码越抽象，越容易阅读和维护。再看另外一个ChromeGrid插件，可视化展示Grid，可以通过UI的方式进行调整：UI是对文本的重新抽象，同时可以避免一些不可能的语法，比如as:.card{grid-template-areas:"imagename""imageposition""socialimage";}布局只能以凸多边形的方式展开，无法分离，也无法突然插入另一个模块变成凹多边形。所以UI可以避免这个错误，简化为横竖线划分UI。显然，这种描述方式效率更高。不得不说，Grid和图形插件的探索是布局领域的一大进步，是一种不断抽象的尝试。只有一个问题需要解决：如何提供一种更直观的方式来描述UI。布局对模块化的影响Grid的布局方式增加了一个维度，会直接影响JS的模块化方式。尤其是在用JSX组织代码的情况下，一个模块就等于UI+JS，嵌套布局会让我们更倾向于从UI的角度去划分模块。比如上图中的模块，如果我们使用Flex布局，我们可能先创建模块X作为左容器，子元素A和B，创建模块Y作为右容器，子元素为C而新容器Z，Z容器的子元素是D和E。如果你的第一印象是代码是这样组织的，你不得不承认模块化会受到布局方式的影响。虽然这种划分在很多情况下是正确的，但是当这五个模块互不相关时，我们创建的容器X、Y、Z就失去了复用性，我们不得不在新的组合场景中重新组合它们。但是在Grid语法中，我们不需要X,Y,Z，只需要使用cssgridgenerator按照上图拖拽自动生成如下布局代码：.parent{display:grid;网格模板列：3fr重复（2、1fr）；网格模板行：重复（5、1fr）；网格列间隙：0px；grid-row-gap:0px;}.div1{grid-area:1/1/3/2;}.??div2{grid-area:3/1/6/2;}.??div3{grid-area:1/2/2/4;}.div4{grid-area:2/2/6/3;}.div5{grid-area:2/3/6/4;}其实就是grid-template-columns的组合grid-template-rows比grid-template-areas更强大，但是没有grid-template-areas直观，但是结合一些可视化系统就很直观了：提取A到5个模块的布局后E、他们之间的关系被拉平了，我们可以从逻辑的角度来考察如何完全做到模块化。4总结CSSGrid本质上是一种二维布局语法。相比Block、Flex等一维布局方案，多了一个维度同时从行和列的角度来定义布局，因此衍生出grid-template-areas等语法，更加内聚整体直观，抽象程度也更高。了解了这些，就可以了解布局未来的发展方向。将布局与Dom分离，一直是前端的梦想。在开发UI部分时，只需要关心页面由哪些模块组成，并实现这些模块即可。你不需要关心它。模块应该如何组合。在描述组合时，可以通过可视化或抽象的字符串来描述布局的结构，并与所写的模块相对应。这种代码可维护性比用DIV来描述结构要高很多。讨论地址是：Jingdu《用 css grid 重新思考布局》·Issue#211·dt-fe/weekly想参与讨论的请戳这里，每周都有新话题，周末或周一发布。前端精读——帮你过滤靠谱的内容。关注前端精读微信公众号