CSS 栅格layout逻辑
跟通过table划分不同的sessions不同, 栅格layout是通过CSS的方法换分不同的栅格, 所以under the hook, 画出来的栅格是等分的
比如
这个就不是等分了, 也就不能这么分
surdas biography in english
使用规则
.wrapper {
display: grid;
}
怎么划分
- 指定大小
.wrapper {
display: grid;
grid-template-columns: 25% 75%;
}
- 另外只用指定大小, 但是如果这个比例不能填充content的话, 就不会变小
.wrapper {
display: grid;
grid-template-columns: 1fr 2fr;
}
- 指定其中一个大小, 其它按照比例
.wrapper {
display: grid;
grid-template-columns: 200px 2fr 1fr;
}
Implicit rows
这个跟flex-wrap类似
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
Explicit rows
这个就是把每一行的固定了
<style>
.wrapper {
display: grid;
grid-template-rows: 64px 1fr 100px;
min-height: 100%;
}
</style>
<div class="wrapper">
<header>My Website</header>
<main>Content goes here</main>
<footer>Copyright notice</footer>
</div>
超出范围的item
<style>
.wrapper {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
height: 100vh;
}
</style>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
Gaps
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
</style>
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
</div>
repeat
.calendar {
grid-template-columns:
250px 1fr 1fr 1fr 1fr 1fr;
}
Alignment
justify-content
对column的alignment
<style>
.wrapper {
display: grid;
justify-content: center;
}
</style>
<div class="wrapper">
<header>Hello World</header>
<section>Stuff here</section>
<footer>Copyright notice</footer>
</div>
justify-items
对item本身的调整
<style>
.wrapper {
display: grid;
justify-items: center;
}
</style>
<div class="wrapper">
<header>Hello World</header>
<section>Stuff here</section>
<footer>Copyright notice</footer>
</div>
align-content
对row的alignment
<style>
.wrapper {
display: grid;
align-content: space-between;
height: 300px;
}
</style>
<div class="wrapper">
<header>Hello World</header>
<section>Stuff here</section>
<footer>Copyright notice</footer>
</div>
<style>
.wrapper {
display: grid;
align-content: center;
height: 300px;
}
</style>
<div class="wrapper">
<header>Hello World</header>
<section>Stuff here</section>
<footer>Copyright notice</footer>
</div>
align-items
就是对于item的alignment
<style>
.wrapper {
display: grid;
height: 300px;
align-items: center;
border: 2px solid pink;
}
</style>
<div class="wrapper">
<header>Hello World</header>
<section>Stuff here</section>
<footer>Copyright notice</footer>
</div>
Self-alignment
Grid Areas
通过grid-template-areas
and grid-area
设计layout
<style>
.wrapper {
display: grid;
grid-template-areas:
'sidebar header'
'sidebar main-content';
grid-template-columns: 250px 1fr;
grid-template-rows: 80px 2fr;
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
main {
grid-area: main-content;
}
</style>
<div class="wrapper">
<aside>Aside</aside>
<header>Header</header>
<main>Main</main>
</div>
Fluid Grids
根据viewport的小换行
<style>
.grid {
display: grid;
gap: 16px;
grid-template-columns:
repeat(auto-fill, minmax(150px, 1fr));
}
</style>
<main class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</main>
auto-fill vs. auto-fit
差别在于是否拉伸