10种现代布局

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

1、结合grid和place-items优雅的实现同时水平居中和垂直居中

640.gif

  
:)


.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、可解构的自适应布局（The Deconstructed Pancake）

这种布局经常出现在电的网站：
① 在视口足够的时候，三个框固定宽度横放
② 在视口不够的时候（宽度在移动上面），宽度仍然固定，，但是自动解构（原谅我的中文水平），不在同一水平面上
当我们设置flex: 0 1 150px;时候：

1.gif

当我们设置flex: 1 1 150px;时候：

2.gif

  
1
  
2
  
3

.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、经典的侧边栏

3.gif

  Min: 150px
  

  Max: 25%


  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?

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、固定的页眉和页脚

固定高度的页眉和页脚，并保留剩余空间的主体是经常使用的布局，我们可以利用grid和fr单位完子实现。

4.gif

Header.com

Footer Content — Header.com 2020

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、经典的圣杯布局（古典圣杯布局）

5.gif

Header.com
Left Sidebar

Right Sidebar
Footer Content — Header.com 2020

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

Span 12
Span 6
Span 4
Span 2

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这种非常有用（行可以排放的卡片数量自动适应））

其效果是如果确保能够满足多个盒的最小宽度（例如上面的150px），则自动弹性适应放置多行。
① 当前宽度是160px（不考虑gap），那么上面四个box的宽度会适应为160px，并且分为4行
② 当前宽度是310px（不考虑间隙），上面四个box分段两行，两个box平分宽度
③ 当满足满足一行放下3个box时，第三个box自动到第一行
④ 当满足满足一行放下4个box时，第四个box自动到第一行

7_1.gif

将auto-fit对划线auto-fill：

7_2.gif

grid-template-columns: repeat(auto-fit, minmax(, 1fr))

1
2
3
4

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、卡片弹性适应性

justify-content: space-between，结合grid和flex实现完的布局

8.gif

  
Title - Card 1
  
Medium length description. Let's add a few more words here.
  



  
Title - Card 2
  
Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.
  



  
Title - Card 3
  
Short Description.
  



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、使用夹具实现流体印刷

9.gif

使用的clamp()方法可以一行实现流体排版。提高UX，非常适合包含阅读内容的卡，因为我们不希望一行字太短或太长。
clamp(, , )

  
Title Here
  

  
Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.
  

  
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?


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、图片，视频，卡片能够按照固定的比例进行布局

10.gif

在展现CMS或其他设计内容时，我们会期待图片，视频，卡片能够按照固定的比例进行布局。而最新的aspect-ratio可以优雅的实现该功能（使用chrome 84+）

  
Title Here
  

  
Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.


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