摘要：
使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目 repeat()也可以用在轨道列表中。 在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30 阅读全文
摘要：
可以通过minmax()函数来创建网格轨道的最小或最大尺寸。 minmax()函数接受两个参数： 第一个参数定义网格轨道的最小值 第二个参数定义网格轨道的最大值 可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压。 在这个示例中，第一行的高度最小值是100px，但其 阅读全文
摘要：
显式网格布局包含：行、列 列 grid-template-columns 行 grid-template-rows 以上行、列网格可以搭配使用！ 如果未定义grid-template-columns或grid-template-rows，则宽高根据自身内容. 也可以采用等份计算单位"fr" (一旦采 阅读全文
摘要：
grid-gap默认还有两个参数 如果grid写默认方式，则行、列都会使用相同的单位 如果grid写两个参数，则行和列各自生效 如果grid写行方式，则仅有行生效 如果grid写列方式，则仅有列生效 1 page { 2 color: #fff; 3 } 4 5 .grid { 6 padding: 阅读全文
摘要：
Grid有三个参数 目前介绍以下两种：grid、inline-grid grid是根据内容来收缩的，你可以试试在子元素使用内边距(padding) 或者 外边距(margin) inline-grid和inline-block会有什么联系呢？ inline-block可以设置宽高，且为行内块 阅读全文
摘要：
Flexbox布局（Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局（基于一维），即使他们的大小是未知或者是动态的。（这里我们称为Flex）。 Flex布局主要思想是让容器有能力让其子项目能够改变其宽度、高度(甚至顺序)，以最佳方式填充可用空间（主要是为了 阅读全文