工業化、響應式的的CSS3 grid佈局應用及其向後相容問題-- 下 --(翻譯自smashingmagazine,有刪改)
阿新 • • 發佈:2019-01-22
接上,[工業化、響應式的的CSS3 grid佈局應用及其向後相容問題– 上 –(翻譯自smashingmagazine,有刪改)](工業化、響應式的的CSS3 grid佈局應用及其向後相容問題– 上 –(翻譯自smashingmagazine,有刪改))
應用先進的格子布局和功能
步驟如下:
1.從最窄的螢幕開始設計佈局
2.逐漸增大螢幕,直到一切變得看上去奇怪
3.加斷點
4.回到步驟2
最後的程式碼如下
@supports (grid-area:auto){
@media screen and (min-width: 500px){
.site{
width : 70em;
display: grid;
grid-template-columns:15em 1fr;
grid-template-rows:1fr minmax(1em , auto);
grid-template-areas:'header main'
'header sidebar'
'header footer';
}
.site-header {
grid-area:header;
background: lightblue;
}
.site-main{
grid-area:main;
height: 50em;
background: olive;
}
.widget-area{
grid-area:sidebar;
height: 20em;
background: yellow ;
}
.site-footer{
grid-area:footer;
height: 10em;
background: grey;
}
}
@media screen and (min-width: 700px){
.site{
width: 90em;
display: grid;
grid-template-columns:20em 2fr 1fr;
grid-template-rows: 1fr minmax(10em, auto);
grid-template-areas:'header main sidebar'
'header footer footer';
}
}
.site-header{
grid-area:header;
background: lightblue;
}
.site-main{
grid-area:main;
height: 20em;
background: olive;
}
.widget-area{
grid-area:sidebar;
height: 20em;
background: yellow;
}
.site-footer{
grid-area:footer;
height: 10em;
background: grey;
}
}
注意對每個grid item 都要設定適當的高度。而且這裡的寬高如果是百分數的話,會相對於它所處的格子的大小,而不是整個父元素。
檔案佈局archive layout
注意,fr不會限制內容的大小,如果內容的字太多,或者因為單詞太長那一行特別長,元素會佔據比應有的fr更多的空間。
寫媒體查詢的時候,因為用的是min-width,所以要從小到大寫。
如果想要item之間有間隔線,可以通過設定container的背景顏色,並給定grid-gap值來完成。
對一些特殊的post內容,可以使其佔據兩行,直接採用gird-column: span 2來完成。注意此時post的容器佈局本身必須不小於2行。
@media screen and (min-width: $query__medium) {
.archive-view {
.site-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1px;
background: grey;
@media screen and (min-width: $query__wide) {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (min-width: $query__x_wide) {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (min-width: $query__xx_wide) {
grid-template-columns: repeat(5, 1fr);
}
}
.entry-title {
word-break: break-word;
}
.post {
background: white;
}
.category-featured {
grid-column: span 2;
}
}
}
單一post或頁面佈局
body:not(.archive-view) {
@supports (grid-area: auto) {
@media screen and (min-width: $query__medium) {
.site-main {
display: grid;
grid-template-columns: 1fr minmax(auto, 46em) 1fr;
align-content: start;
grid-template-areas:
". post ."
". nav ."
". comments .";
}
.post {
grid-area: post;
}
.post-navigation {
grid-area: nav;
}
.comments-area {
grid-area: comments;
}
}
}
}
一共用到了兩個grid容器,一個是整體,一個是對文章本身應用grid佈局。
.post {
grid-area: post;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
這一條務必牢記在心:
不可以脫離文章的內容,重新定位它。
對有featured 圖片的post,再做一次。
如果沒有grid-gap,而featured image 因為是空元素,空間會自動摺疊。但有gap在,就需要重新定義規則。
post {
grid-area: post;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"header header header header"
"meta meta meta meta"
"featimg featimg featimg featimg"
"content content content content"
"footer footer footer footer";
@media screen and (min-width: $query__wide) {
grid-template-areas:
"header header header header"
"featimg featimg featimg featimg"
"meta content content content"
"footer footer footer footer";
}
}
.entry-header {
grid-area: header;
}
.entry-meta {
grid-area: meta;
}
.featured-image {
grid-area: featimg;
}
.entry-content {
grid-area: content;
}
.entry-footer {
grid-area: footer;
}
總結
不再利用笨拙的hack方法,而是用簡練乾淨的grid來完成佈局。如果堅持向後相容,你也可以利用@supports方法來漸進式增強。