跟着 MDN 学CSS day_42：等分轨道、层叠放置与混合布局

本文通过MDN网格布局技能测试的四道实战题目解析CSS Grid在实际场景中的应用技巧。内容涵盖grid-template-columns创建等分三列布局、基于网格线的跨轨道与层叠放置、grid-template-areas区域命名与元素映射、以及Grid与Flexbox混合使用构建复合卡片布局。每道题目均包含问题分析、完整代码方案和底层机制讲解。1. 等分三列与自动行放置第一道题目要求创建一个三列网格四子项自动排列列宽等分可用空间行列间距均为20像素。这是Grid布局中最基础的轨道定义场景。题目给出的HTML结构包含一个grid容器和四个div子项divclassgriddivOne/divdivTwo/divdivThree/divdivFour/div/div初始CSS中.grid没有任何样式四个div按照默认的块级行为垂直堆叠。要完成题目要求需要同时解决三个问题创建三列、列宽等分、设置间距。.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}display: grid将容器转变为grid容器。grid-template-columns: 1fr 1fr 1fr定义了三列轨道每个轨道的宽度为1fr。三个1fr意味着浏览器将容器可用宽度三等分每列获得完全相等的份额。使用1fr而非固定像素值确保了列宽随容器缩放始终保持等分比例。gap: 20px同时设置行间距和列间距为20像素。gap是grid-gap的标准写法可以接受一个值同时应用于行和列也可以接受两个值分别指定行间距和列间距。间隙空间在轨道之间创建不影响轨道边缘与容器边缘的距离。子项的自动放置由Grid的自动放置算法完成。四个子项依次填入网格单元格One进入第1行第1列Two进入第1行第2列Three进入第1行第3列Four进入第2行第1列。子项数量超过三列时自动折行这一行为由隐式网格机制处理。题目未要求定义行轨道因此隐式行的高度根据内容自动调整auto为默认值。这里有一个重要细节题目没有使用repeat函数简化书写。grid-template-columns: 1fr 1fr 1fr等价于grid-template-columns: repeat(3, 1fr)。在列数确定且较少时两者效果相同但当列数增多时repeat更简洁且易于修改。2. 跨轨道放置与z-index层叠控制第二道题目基于已定义的4列3行网格要求两个子项跨越多个轨道并且第二个子项覆盖在第一个子项上方。这涉及grid-column和grid-row的精确跨度控制以及层叠上下文的z-index管理。题目给出的网格容器已经定义好.grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:100px 100px 100px;gap:10px;}四列等宽三行固定100像素高度间隙10像素。两个子项item1和item2需要分别指定跨越的轨道范围。.item1{grid-column:1 / 4;grid-row:1 / 3;}.item2{grid-column:2 / 5;grid-row:2 / 4;}item1设置grid-column: 1 / 4表示从第1条列线起始延伸到第4条列线结束跨越第1、2、3列共三列宽度。grid-row: 1 / 3从第1条行线到第3条行线跨越第1行和第2行共两行高度。item1占据的区域是一个3列乘2行的矩形。item2设置grid-column: 2 / 5从第2条列线到第5条列线跨越第2、3、4列。grid-row: 2 / 4从第2条行线到第4条行线跨越第2行和第3行。item2占据的区域同样是一个3列乘2行的矩形。两个元素的放置区域存在重叠部分。item1占据列1到3、行1到2item2占据列2到4、行2到3。重叠发生在列2到3、行2的区域即第2行中间两列的位置。默认情况下后出现的DOM元素在重叠时显示在上方item2在源码中位于item1之后因此item2覆盖item1。题目明确要求这个层叠关系所以不需要额外设置z-index。如果实际需求与默认顺序相反需要给item1设置较高的z-index值来调整堆叠顺序。这种跨轨道放置的技术在创建非对称布局、杂志风格版面、以及需要特定元素突出显示的卡片设计中非常实用。网格线编号提供了精确到单元格级别的定位能力。3. grid-template-areas的区域命名与元素映射第三道题目要求使用grid-template-areas属性将四个子项按照指定布局排列而不是使用基于线号的放置方式。这种方法的优势在于布局结构在CSS代码中直观可见。题目给出的grid容器定义了两列不等宽的结构.grid{display:grid;grid-template-columns:1fr 2fr;gap:10px;}第一列占可用空间的一份第二列占两份即1比2的宽度比例。四个子项分别是one、two、three、four需要将它们放置到对应的网格区域。解决方案分两步。第一步是在容器上使用grid-template-areas定义区域布局.grid{display:grid;grid-template-columns:1fr 2fr;gap:10px;grid-template-areas:one onetwo threefour four;}grid-template-areas定义了3行2列的命名区域矩阵。第一行两个单元格都填写one表示名为one的元素横跨整行。第二行左侧two右侧three两个元素各占一列。第三行两个单元格都是fourfour同样横跨整行。第二步是将每个子项通过grid-area属性绑定到对应的区域名称.one{grid-area:one;}.two{grid-area:two;}.three{grid-area:three;}.four{grid-area:four;}grid-area的值直接引用grid-template-areas中定义的区域名称不需要加引号。浏览器根据名称匹配关系自动将子项放入对应区域无需计算线号或列数。观察这个布局的几何特征one和four各自横跨两列利用了grid-template-areas中相同名称重复出现即表示跨列的特性。two和three各占一列位于中间一行。整个布局形成一个头部横跨、中间分栏、底部横跨的经典三段式结构。grid-template-areas的约束规则需要特别注意同名区域必须形成矩形不能出现在多个不连续的位置。例如one不能出现在第一行左侧和第二行右侧这会形成L形区域不是矩形浏览器将拒绝渲染该布局。4. Grid与Flexbox的混合嵌套布局第四道题目要求同时使用Grid和Flexbox完成一个卡片列表布局且不能修改HTML结构。题目展示了一个典型的混合布局场景外层使用Grid控制卡片整体排列内层使用Flexbox控制标签的流式排列。题目给出的HTML结构是container包含四个card每个card内部有一张图片和一个ul标签列表divclasscontainerdivclasscardimgsrcballoons1.jpgalta single red balloon/ulclasstagsliballoon/lilired/lilisky/liliblue/liliHot air balloon/li/ul/div!-- 三个类似的card --/div外层容器需要将卡片排列为两行两列。这使用Grid布局最合适.container{display:grid;grid-template-columns:1fr 1fr;gap:20px;}两列等宽卡片按顺序自动填充。前两个卡片占据第一行的两列后两个卡片占据第二行的两列。使用1fr确保列宽随容器等分缩放间隙20像素提供卡片之间的呼吸空间。内层标签列表需要横向排列并自动换行。标签数量不一有的卡片5个标签有的4个。这使用Flexbox的wrap模式最合适.tags{display:flex;flex-wrap:wrap;gap:5px;list-style:none;padding:0;margin:10px 0 0 0;}.tags li{background-color:#eee;padding:5px 10px;border-radius:10px;font-size:14px;}display: flex将ul转为flex容器li标签沿主轴横向排列。flex-wrap: wrap是关键声明当一行放不下所有标签时自动折行。每个li设置了背景色和内边距呈现标签外观。标签之间的间距通过gap或margin控制。这种Grid与Flexbox的混合使用反映了现代CSS布局的最佳实践。Grid负责宏观的页面结构划分处理行与列的二维排布。Flexbox负责微观的组件内部排列处理一维的内容流。两者各司其职互不冲突。在嵌套关系中card既是Grid容器的一个网格项又可以是Flexbox容器的父级或者直接包含其他布局内容。card本身没有设置display: flex它内部的img和ul按照默认文档流垂直排列img在上标签列表在下。如果卡片内部需要更复杂的排列可以进一步给card设置display: flex改变其内部布局。5. 四个题目覆盖的Grid核心能力总结四道题目由浅入深地覆盖了Grid布局的核心能力梳理其关联有助于形成完整的知识结构。第一题聚焦轨道定义是Grid的入门操作。grid-template-columns配合fr单位定义等分列gap控制间距子项自动放置。这是大多数Grid布局的起点掌握了这一步就能处理基本的等分网格需求。第二题引入网格线定位是Grid精确控制的体现。通过指定起止线号元素可以跨越任意数量的轨道也可以与其他元素重叠。这种基于线的放置方式给予开发者像素级的位置控制适合非对称布局和特殊视觉效果。层叠配合z-index可以创造丰富的视觉层次。第三题切换到区域命名方式是Grid的另一种放置策略。grid-template-areas让布局结构在CSS中以文本图形的方式呈现可读性极强。对于结构规整、区域明确的布局这种方式的维护成本低于手动计算线号。两种放置方式可以混合使用但通常选择一种作为主导策略。第四题扩展到与Flexbox的协作是真实项目中Grid的典型使用方式。Grid不排斥其他布局模型一个页面可以同时使用Grid做整体框架、Flexbox做局部组件、甚至普通文档流处理简单内容。理解各种布局模型的适用边界在合适的场景选择合适的工具是CSS布局能力成熟的标志。还在纠结 CSS 样式写得杂乱无章、布局频频踩坑收藏此文持续跟进后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货从基础样式到实战排版一站式学透快速提升前端页面编写能力