原文来自： 作者：懵懵懂懂学前端 blog.csdn.net/qq_56966124…
现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 几 种强大的 CSS 布局，它们实现了一些非凡的工作。
01. 超级居中：place-items: center
对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。
首先指定 grid 作为 display 方法，然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center ， align-items 和 justify-items 都将设置为 center。
.parent {
display: grid;
place-items: center;
}
这使得内容能够在父级内完美居中，而不管内部大小。
02. 解构煎饼式布局：flex: <grow> <shrink> <baseWidth>
接下来我们讲解构的煎饼！这是营销网站的常见布局，例如，可能有一行 3 个项目，通常带有图像、标题，然后是一些描述产品某些功能的文本。在移动设备上，我们希望它们能够很好地堆叠，并随着我们增加屏幕尺寸而扩展。
通过使用 Flexbox 实现此效果，您不需要在屏幕尺寸发生变化时通过媒体查询来调整这些元素的位置。
flex 简写代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。
正因为如此，如果您想让您的框填充到它们的 <flex-basis> 大小，缩小到更小的尺寸，但不拉伸以填充任何额外的空间，请写入：flex: 0 1 <flex-basis> 。在这种情况下，您的 <flex-basis> 是 150px，所以应该是这样：
.parent {
/* width: 600px; */
height: 500px;
border: 1px solid blue;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.child {
flex: 0 1 150px;
border: 1px solid green;
margin: 5px;
}
如果您确实希望框在换到下一行时拉伸并填充空间，请将 <flex-grow> 设置为 1 ，所以应该是这样：
.child {
flex: 1 1 150px;
}
现在，当您增加或减少屏幕尺寸时，这些 flex 项目会缩小和增长。
03. 侧边栏布局：grid-template-columns: minmax(<min>, <max>) …)
此演示对网格布局利用了 minmax 函数。我们在这里做的是将最小侧边栏大小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。
将以下值添加为 grid-template-columns 的值：minmax(150px, 25%) 1fr 。在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. 煎饼堆栈布局：grid-template-rows: auto 1fr auto
与 Deconstructed Pancake 不同，当屏幕尺寸改变时，本例不会包含它的子元素。通常称为粘性页脚，这种布局通常用于网站和应用程序，跨多个移动应用程序（页脚通常是工具栏）和网站（单页应用程序通常使用这种全局布局）。
向组件添加 display: grid 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。
要使页脚粘在底部，请添加：
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
1fr页眉和页脚内容设置为自动采用其子项的大小，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。
05. 经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！
要使用一行代码编写整个网格，请使用 grid-template 属性。这使您可以同时设置行和列。
属性和值对为：grid-template: auto 1fr auto / auto 1fr auto 。第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。
<div class="parent">
<header>Header</header>
<div class="left-side" contenteditable>Left Sidebar</div>
<main> Main Content</main>
<div class="right-side" contenteditable>Right Sidebar</div>
<footer>Footer</footer>
</div>
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
/*1开始，跨越2个网格*/
/* 等同于 grid-column: 1 / span 2; */
grid-column: 1 / 4;
height: 100px;
background: #f0d7e5;
}
.left-side {
grid-column: 1 / 2;
background: #a4e3e5;
height: 100px;
}
main {
grid-column: 2 / 3;
background: #efbca2;
}
.right-side {
grid-column: 3 / 4;
background: #fae5ad;
}
footer {
/* 高度自适应 */
height: 100px;
grid-column: 1 / 4;
background: #d0f6be;
}
与上一个示例一样，页眉和页脚具有自动调整大小的内容，这里的左侧和右侧边栏会根据其子项的固有大小自动调整大小。但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。
06. 12 跨网格：grid-template-columns: repeat(12, 1fr)
接下来我们有另一个经典布局：12 跨网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。
<div class="parent">
<div class="span-12"> span 12</div>
<div class="span-6"> span 6</div>
<div class="span-4"> span 4</div>
</div>
.parent{
display: grid;
/* 均分为12格 */
grid-template-column: repeat(12,1fr);
/* border:1px solid red; */
}
.parent >div {
height: 50px;
}
.span-12 {
/* grid-column CSS 属性是 grid-column-start (en-US) 和 grid-column-end (en-US) 的简写属性，用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动） */
/* 铺满 等价于 grid-column: 1/ span 12; */
grid-column: 1 / 13;
background: #d0f6be;
}
.span-6 {
grid-column: 1/6;
background: #efbca2;
}
.span-4 {
grid-column: 4/8;
background: #a4e2e5;
}
现在您有一个 12 列(13条网格线)的轨道网格，我们可以将子项放在网格上。一种方法是使用网格线放置它们。例如， grid-column: 1 / 13 将跨越从第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5; 将跨越前四个列。
另一种方法是使用 span 关键字。使用 span ，您可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，grid-column: 1 / span 12 将等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 将等效于 grid-column: 2 / 8 。
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
对于这第七个示例，结合您已经了解的一些概念来创建具有自动放置且灵活的子项的响应式布局。漂亮整齐。这里要记住的关键点是 repeat 、 auto-(fit|fill) 和 minmax() ，可以记住它们的首字母缩写词 RAM。
总之，应是这样：
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
再次使用 repeat ，但这次使用 auto-fit 关键字而不是显式数值。这可以自动放置这些子元素。这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。
使用 auto-fit ，当它们的水平尺寸超过 150px 时，框将拉伸以填充整个剩余空间。但是，如果您将其更改为 auto-fill ，则当超出 minmax 函数中的基本大小时，它们将不会拉伸：
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
