前端常用布局

1. 超级居中

<div class="parent blue">
  <div class="box coral" contenteditable>
	HELLO
  </div>
</div>

.ex1 .parent {
  display: grid;
  place-items: center;
}

2. 可解构的自适应布局

<div class="parent white">
  <div class="box green">1</div>
  <div class="box green">2</div>
  <div class="box green">3</div>
</div>

.ex2 .parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.ex2 .box {
  flex: 1 1 150px;	/* flex-grow: 1 ，表示自动延展到最大宽度 */
  flex: 0 1 150px;	/* no stretching */
  margin: 5px;
}

3. 经典的 sidebar

<div class="parent">
  <div class="section yellow" contenteditable>
	Min: 150px / Max: 25%
  </div>
  <div class="section purple" contenteditable>
   	This element takes the second grid position (1fr), meaning it takes up the reset of the remaining space
  </div>
</div>

.ex3 .parent {
  display: grid;
  grid-templeate-columns: minmax(150px, 25%) 1fr;
}

4. 固定的 header 和 footer

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>

.ex4 .parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

5. 经典的圣杯布局

<div class="parent">
  <header class="pink section">Header</header>
  <div class="left-side blue section" contenteditable>Left Sidebar</div>
  <main class="section coral" contenteditable>Main Content</main>
  <div class="right-side yellow section" contenteditable>Right Sidebar</div>
  <footer class="green section">Footer</footer>
</div>

.ex5 .parent {
  display: grid;
  grid-template: auto 1fr auto/auto 1fr auto;
}

.ex5 header {
  padding: 2rem;
  grid-column: 1/4;
}

.ex5 .left-side {
  grid-column: 1/2;
}

.ex5 .main {
  grid-column: 2/3;
}

.ex5 .right-side {
  grid-column: 3/4;
}

.ex5 .footer {
  grid-column: 1/4;
}

6. RAM 技巧

<div class="parent white">
  <div class="box pink">1</div>
  <div class="box purple">2</div>
  <div class="box blue">3</div>
  <div class="box green">4</div>
</div>

.ex7 .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

7. 卡片弹性自适应

<div class="parent white">
  <div class="card yellow">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here</p>
    <div class="visual pink"></div>
  </div>

  <div class="card yellow">
    <h3>Title - Card 2</h3>
    <p contenteditable>Medium length description with a few more words here</p>
    <div class="visual blue"></div>
  </div>

  <div class="card yellow">
    <h3>Title - Card 3</h3>
    <p contenteditable>Medium length description with a few more words here</p>
    <div class="visual green"></div>
  </div>
</div>

.ex8 .parent {
  display: grid;
  height: auto;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.ex8 .visual {
  height: 100px;
  width: 100%;
}

.ex8 .card {
  dispaly: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

.ex8 h3 {
  margin: 0;
}

8. 使用 clamp 实现 fluid typography

<div class="parent white">
  <div class="card purple">
    <h1>Title Here</h1>
    <div class="visual yellow"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
  </div>
</div>

.ex9 .parent {
  display: grid;
  place-items: center;
}

.ex9 .card {
  width: clamp(23ch, 50%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.ex9 .visual {
  height: 125px;
  width: 100%;
}

9. 完美实现比例

<div class="parent white">
  <div class="card blue">
    <h1>Video Title</h1>
    <div class="visual green"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit</p>
  </div>
</div>

.ex10 .parent {
  display: grid;
  place-items: center;
}

.ex10 .card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.ex10 .visual {
  aspect-ratio: 16/9;
}