文章： https://mp.weixin.qq.com/s/W0hps2nfJI9AjnrtEen2Yg

1、結(jié)合grid和place-items優(yōu)雅的實(shí)現(xiàn)同時(shí)水平居中和垂直居中

640.gif

<div class="parent" >
  <div class="child" contenteditable>:)</div>
</div>

.parent {
  display: grid;
  place-items: center;
  background: lightblue;
  width: 500px;
  height: 500px;
  resize: both;
  overflow: auto;
}
.child {
  // etc.
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
body {
  font-family: system-ui, serif;
}

2、可解構(gòu)的自適應(yīng)布局（The Deconstructed Pancake）

這種布局經(jīng)常出現(xiàn)在電的網(wǎng)站：
① 在視口足夠的時(shí)候，三個(gè)框固定寬度橫放
② 在視口不夠的時(shí)候（寬度在移動(dòng)上面），寬度仍然固定，，但是自動(dòng)解構(gòu)（原諒我的中文水平），不在同一水平面上
當(dāng)我們?cè)O(shè)置flex: 0 1 150px;時(shí)候：

1.gif

當(dāng)我們?cè)O(shè)置flex: 1 1 150px;時(shí)候：

2.gif

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
.parent {
  display: flex;
  flex-wrap: wrap;
}
.child {
  //  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  //  If we don't want the items to stretch:
  flex: 0 1 150px;
  //  If we do want the items to stretch:
  flex: 1 1 150px;
  //   etc.
  border: 1px solid red;
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
body {
  font-family: system-ui, serif;
}

3、經(jīng)典的側(cè)邊欄

3.gif

<div class="sidebar" contenteditable>
  Min: 150px
  <br/>
  Max: 25%
</div>
<p class="content" contenteditable>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nulla architecto maxime modi nisi. Quas saepe dolorum, architecto quia fugit nulla! Natus, iure eveniet ex iusto tempora animi quibusdam porro?</p>

body {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
  padding: 0;
  margin: 0;
}
.sidebar {
  height: 100vh;
  //   etc.
  background: lightpink;
  font-size: 2rem;
  text-align: center;
}
.content {
  padding: 2rem;
}
body {
  font-family: system-ui, serif;
}

4、固定的頁眉和頁腳

固定高度的頁眉和頁腳，并保留剩余空間的主體是經(jīng)常使用的布局，我們可以利用grid和fr單位完子實(shí)現(xiàn)。

4.gif

<header><h1>Header.com</h1></header>
<main></main>
<footer>Footer Content — Header.com 2020</footer>

body {
  display: grid;
  height: 100vh;
  grid-template-rows: auto 1fr auto;
}
// etc
header {
  background: lightpink;
  padding: 2rem;
}
main {
  background: coral;
}
footer {
  background: wheat;
  padding: 2rem;
  text-align: center;
}
body {
  font-family: system-ui, sans-serif;
}

5、經(jīng)典的圣杯布局（古典圣杯布局）

5.gif

<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>

body {
  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;
}

6、有意思的的疊塊

image.png

<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>

body {
  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;
}

7、RAM技巧（彈性布局圖片/ box這種非常有用（行可以排放的卡片數(shù)量自動(dòng)適應(yīng)））

其效果是如果確保能夠滿足多個(gè)盒的最小寬度（例如上面的150px），則自動(dòng)彈性適應(yīng)放置多行。
① 當(dāng)前寬度是160px（不考慮gap），那么上面四個(gè)box的寬度會(huì)適應(yīng)為160px，并且分為4行
② 當(dāng)前寬度是310px（不考慮間隙），上面四個(gè)box分段兩行，兩個(gè)box平分寬度
③ 當(dāng)滿足滿足一行放下3個(gè)box時(shí)，第三個(gè)box自動(dòng)到第一行
④ 當(dāng)滿足滿足一行放下4個(gè)box時(shí)，第四個(gè)box自動(dòng)到第一行

7_1.gif

將auto-fit對(duì)劃線auto-fill：

7_2.gif

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

body {
  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;
}

8、卡片彈性適應(yīng)性

justify-content: space-between，結(jié)合grid和flex實(shí)現(xiàn)完的布局

8.gif

<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>

body {
  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;
}

9、使用夾具實(shí)現(xiàn)流體印刷

9.gif

使用的clamp()方法可以一行實(shí)現(xiàn)流體排版。提高UX，非常適合包含閱讀內(nèi)容的卡，因?yàn)槲覀儾幌Ｍ恍凶痔袒蛱L(zhǎng)。
clamp(<min>, <actual>, <max>)

<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>

body {
  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;
}

10、圖片，視頻，卡片能夠按照固定的比例進(jìn)行布局

10.gif

在展現(xiàn)CMS或其他設(shè)計(jì)內(nèi)容時(shí)，我們會(huì)期待圖片，視頻，卡片能夠按照固定的比例進(jìn)行布局。而最新的aspect-ratio可以優(yōu)雅的實(shí)現(xiàn)該功能（使用chrome 84+）

<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>

body {
  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;
}