# 常用CSS技巧
# 1. 使用grid绝对居中
在没有和flex grid之前，垂直居中一直不能很优雅的实现。而现在，可以结合我们grid和place-items优雅的实现同时水平居中和垂直居中。
<div class="parent">
<div class="child"></div>
</div>
1
2
3
2
3
.parent
display grid
place-items center
background lightblue
width 300px
height 300px
resize both
overflow auto
.child
padding 2rem
border 1px solid red
background lightpink
font-size 2rem
text-align center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 2. 可解构的自适应布局
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
.parent
display flex
flex-wrap wrap
.child
// If we don't want the items to stretch:
// flex 0 1 200px
// If we do want the items to stretch:
flex 1 1 200px
border 1px solid red
background lightpink
font-size 2rem
text-align center
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 3. 经典的侧边栏
同样使用grid布局，结合可以minmax()实现弹性，在适应大屏幕的时候很有用。
<div class="wrapper">
<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>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
.wrapper
display grid
grid-template-columns minmax(150px, 25%) 1fr
padding 0
margin 0
.sidebar
height 100vh
background lightpink
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 4. 固定的页眉和页脚
固定高度的页眉和页脚，并保留剩余空间的主体是经常使用的布局，我们可以利用grid和fr单位完子实现。
<div class="wrapper">
<header>
<h1>Header.com</h1>
</header>
<main></main>
<footer>Footer Content — Header.com 2020</footer>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
.wrapper
display grid
height 100vh
grid-template-rows auto 1fr auto
header
background lightpink
padding 2rem
main
background coral
footer
background wheat
padding 2rem
text-align center
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 5. 圣杯布局
<div class="wrapper">
<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>
</div>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.wrapper
display grid
height 100vh
grid-template auto 1fr auto / auto 1fr auto
header
background lightpink
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
grid-column 1 / 4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 6. 弹性卡片
<div class="wrapper">
<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>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.wrapper
display grid
grid-gap 1rem
grid-template-columns repeat(3, 1fr)
.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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15