参考链接：阮一峰--《只要一行代码，实现五种CSS经典布局》
一、空间居中布局
// html <div class="container"> <div class="item">1</div> </div> // CSS .container { display: grid; place-items: center; // 是简写： place-items：<align-items>垂直位置 <justify-items>水平位置 background: lightblue; width: 600px; height: 600px; } .item { border: 1px solid; border-radius: 8px; width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 2rem; color: #fff; }
二、并列式布局
Flex 布局比较方便，内容居中（justify-content）可换行（flex-wrap）
flex：<flex-grow> <flex-shrink> <flex-basis>
详细看：bilibili-flex 或 Flex 语法
三、两栏式布局
两栏布局就是一个边栏，一个主栏。
使用 Grid 实现很容易
.container { display: grid; grid-template-columns: minmax(150px, 25%) 1fr; }
四、三明治布局
三明治布局是指，页面在垂直方向上，分为：页眉，内容区，页脚
.container { display: grid; grid-template-rows: auto 1fr auto; }
上面代码写在容器上面，指定采用 Grid 布局。核心代码是grid-template-rows那一行，指定垂直高度怎么划分，这里是从上到下分成三部分。第一部分（页眉）和第三部分（页脚）的高度都为auto，即本来的内容高度；第二部分（内容区）的高度为1fr，即剩余的所有高度，这可以保证页脚始终在容器的底部。
五、圣杯布局