css布局

安冬的码畜日常

【CSS in Depth 2 精译_035】5.5 Grid 网格布局中的子网格布局（全新内容）当前内容所在位置（可进入专栏查看其他译好的章节内容）《CSS in Depth》新版封面译者按学完 CSS 网格布局中的隐式网格（Implicit grid），这一节又迎来了一个非常实用的知识点：子网格（subgrid）。本节内容在 6 年前发行第 1 版时仅以一小段文字说明草草带过。经历了 6 年的技术沉淀，作者在第 2 版中索性另起一节，通过一个具体的案例，将子网格近年来的主流用法与最佳实践融入进来，最后还顺便提了一下尚在试验阶段的一个 CSS 新特性：砖石布局。窃以为这才是前端开发人员最应具备的职

安冬的码畜日常

【CSS in Depth 2 精译_034】5.4 Grid 网格布局的显式网格与隐式网格（下）当前内容所在位置（可进入专栏查看其他译好的章节内容）《CSS in Depth》新版封面译者按经过了上篇和中篇的历练，不知道大家对隐式网格这个知识点掌握得怎么样？虽然也尽量考虑图文并茂，但我自己总感觉少了点实战的味道。好在我新发现了 CSDN 一个类似 CodePen 一样的模块，有时间的话我会尝试把这个“下篇”中的内容放进去看看效果。先对隐式网格这个知识点来个收尾吧。

安冬的码畜日常

【CSS in Depth 2 精译_029】5.2 Grid 网格布局中的网格结构剖析（上）当前内容所在位置（可进入专栏查看其他译好的章节内容）《CSS in Depth》新版封面译者按上一节，我们通过一个 2行 × 3列的简单网格了解了网格布局中的两个核心概念 —— 网格容器（grid container）和网格元素（grid items），并认识了一个新的尺寸单位 fr（表示 fraction unit，即分数单位）。这一节，作者将结合上一章 Flexbox 布局使用的示例页，对网格布局的结构进行抽丝剥茧的深入讲解，一起来看看吧（由于内容相对较多，拟分为上篇、下篇两个部分发表，本篇为上篇

安冬的码畜日常

【CSS in Depth 2 精译_030】5.2 Grid 网格布局中的网格结构剖析（下）当前内容所在位置（可进入专栏查看其他译好的章节内容）《CSS in Depth》新版封面网格轨道定义好后，下一步就是将各网格元素放置到特定的位置。浏览器给网格中的每条网格线都分配了如图 5.7 所示的编号。有了它们 CSS 就能将每个元素指定到具体位置。

安冬的码畜日常

【CSS in Depth 2 精译_031】5.3 Grid 网格布局的两种替代语法当前内容所在位置（可进入专栏查看其他译好的章节内容）《CSS in Depth》新版封面译者按上一节我们学习了网格线的编号和页面元素与网格单元的定位方法，然后探讨了网格布局与 Flexbox 布局的区别与联系。这一节再来看看网格布局的另外两种灵活且强大的写法。

安冬的码畜日常

【CSS in Depth 2 精译_026】4.4 Flexbox 元素对齐、间距等细节处理（上）当前内容所在位置（可进入专栏查看其他译好的章节内容）至此，我们已经对 Flexbox 最为核心的知识点有了全面深入的了解。不过前面提到过，还有很多设置项偶尔也能派上用场，它们大多与弹性子元素在弹性容器中的对齐方式或间距设置有关。还有一些设置用于控制换行，或者重新对子元素单独排序。

三月的一天

CSS实现两栏布局，左侧固定宽高，右侧超高滚动加载要实现左侧子元素高度固定，右侧子元素超高滚动加载，并且左侧子元素与父级元素高度一致且不跟随滚动，可以使用CSS的flex布局和overflow属性来实现。