一、超级居中 place-items: center
HTML
<div class="parent blue" >
<div class="box coral" contenteditable>
:)
</div>
CSS
.parent { display: grid; place-items: center; }
二、解构煎饼式布局：flex:1 1 300px；flex-grow[定义项目的放大比例，默认为0] flex-shrink[定义了项目的缩小比例，默认为1] flex-basis[定义了在分配多余空间之前，项目占据的主轴空间（main size）]
实际可应用于自适应样式，大屏可舒展和小屏可堆叠
HTML
CSS
三、侧边栏布局：grid-template-columns: minmax(min, max) 1fr
对网格布局利用了 minmax 函数。我们在这里做的是将最小侧边栏大小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。
HTML
CSS
四、煎饼堆栈布局：grid-template-rows: auto 1fr auto
HTML
CSS
五、经典圣杯布局：grid-template: auto 1fr auto / auto 1fr auto
对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！
HTML
<header><h1 contenteditable>Header.com</h1></header>
<div class="left-sidebar" contenteditable>Left Sidebar</div>
<main contenteditable></main>
<div class="right-sidebar" contenteditable>Right Sidebar</div>
<footer contenteditable>Footer Content — Header.com 2020</footer>
CSS
.wrapper5 {
display: grid;
height: 100vh;
grid-template: auto 1fr auto / auto 1fr auto
}
// etc
header {
background: lightpink;
padding: 2rem;
grid-column: 1 / 4;
}
.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}
main {
background: coral;
grid-column: 2 / 3;
}
.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}
footer {
background: wheat;
padding: 2rem;
text-align: center;
grid-column: 1 / 4;
}
body {
font-family: system-ui, sans-serif;
}
.left-sidebar,
.right-sidebar {
padding: 1rem;
}
六、12 跨网格：grid-template-columns: repeat(12, 1fr)
可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。
HTML
<div class="span-12">Span 12</div>
<div class="span-6">Span 6</div>
<div class="span-4">Span 4</div>
<div class="span-2">Span 2</div>
CSS
.wrapper6 {
display: grid;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
}
// etc
div {
display: grid;
place-items: center;
}
.span-12 {
background: lightpink;
grid-column: 1 / 13;
}
.span-6 {
background: lightblue;
grid-column: 1 / 7;
}
.span-4 {
background: coral;
grid-column: 4 / 9;
}
.span-2 {
background: yellow;
grid-column: 3 / 5;
}
body {
font-family: system-ui, sans-serif;
}
七、RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr)) repeat(auto-fit, minmax(200px, 1fr));
HTML
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
CSS
.wrapper7 {
display: grid;
height: 100vh;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
// etc
div {
display: grid;
place-items: center;
background: lightpink;
}
body {
font-family: system-ui, sans-serif;
}
八、 排列布局：justify-content: space-between
HTML
<div class="card">
<h1>Title - Card 1</h1>
<p>Medium length description. Let's add a few more words here.</p>
<div class="visual"></div>
</div>
<div class="card">
<h1>Title - Card 2</h1>
<p>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<div class="visual"></div>
</div>
<div class="card">
<h1>Title - Card 3</h1>
<p>Short Description.</p>
<div class="visual"></div>
</div>
CSS
.wrapper8 {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
// etc
.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
background: lightpink;
padding: 1rem;
}
body {
font-family: system-ui, sans-serif;
}
h1 {
font-size: 1.5rem;
}
九、 保持我的风格：clamp(<min>, <actual>, <max>)
设置绝对最小和最大尺寸以及实际尺寸。有了值，应该这样：
HTML
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eveniet beatae veritatis saepe corporis voluptates illo placeat maxime sapiente. Sit facere cumque quidem ad quo, dolores pariatur repudiandae ullam animi?</p>
</div>
CSS
.wrapper9 {
display: grid;
place-items: center;
height: 100vh;
}
.visual {
height: 100px;
width: 100%;
background: wheat;
margin: 0.5rem 0;
}
.card {
width: clamp(45ch, 50%, 75ch);
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}
body {
font-family: system-ui, sans-serif;
}
h1 {
font-size: 1.5rem;
}
十、 保持宽高比：aspect-ratio: <width> / <height>
使用 aspect-ratio 属性，当调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。我们通过 aspect-ratio: 16 / 9 保持此宽高比。
HTML
<div class="card">
<h1>Title Here</h1>
<div class="visual"></div>
<p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
</div>
CSS
.wrapper10 {
display: grid;
place-items: center;
height: 100vh;
}
.visual {
aspect-ratio: 16/9;
background: wheat;
margin: 0.5rem 0;
}
.card {
width: 80%;
display: flex;
flex-direction: column;
background: lightpink;
padding: 1rem;
}
body {
font-family: system-ui, sans-serif;
}
h1 {
font-size: 1.5rem;
}
