14. CSS布局（下）

14. CSS布局（下）

Grid简单语法

二维布局用Grid，一维布局用flex

参考：https://css-tricks.com/snippets/css/complete-guide-grid/

Grid也分container和items

.container{
display:grid | inline-grid;
}

行和列

.container{
grid-template-columns:40px 50px auto 50px 40px;
grid-template-rows:25% 100px auto;
}

Screen Shot 2021-12-19 at 6.20.20 PM

Screen Shot 2021-12-19 at 6.32.37 PM

fr - free space 巧记：份

.container{
	grid-template-columns: 1fr 1fr 1fr;
}

.container{
	grid-template-columns:1fr 50px 1fr 1fr;
}

Screen Shot 2021-12-19 at 6.50.15 PM

分区

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Screen Shot 2021-12-19 at 7.00.58 PM

grid属性太多，用到再说，用不到就算了。

Grid例子和游戏

实践

布局

Grid尤其适合不规则布局

经验

等到Grid普及了，前端对CSS的要求会进一步降低

目前你简单尝试一下Grid就可以了

Screen Shot 2021-12-20 at 4.18.02 AM

Screen Shot 2021-12-20 at 4.26.48 AM

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.demo{
  display:grid;
  border:1px solid red;
  grid-template-rows:240px repeat(4,120px);
  grid-template-columns:250px 250px;
  grid-template-areas:
    "big mid1"
    "big mid2"
    "sm1 mid2"
    "sm2 mid3"
    "sm3 mid3";
}
.demo > .image:first-child{
  grid-area:big;
  border:1px solid red;
}
.demo > .image:nth-child(2){
  grid-area:sm1;
  border:1px solid red;
}
.demo > .image:nth-child(3){
  grid-area:sm2;
  border:1px solid red;
}
.demo > .image:nth-child(4){
  grid-area:sm3;
  border:1px solid red;
}
.demo > .image:nth-child(5){
  grid-area:mid1;
  border:1px solid red;
}
.demo > .image:nth-child(6){
  grid-area:mid2;
  border:1px solid red;
}
.demo > .image:nth-child(7){
  grid-area:mid3;
  border:1px solid red;
}

Screen Shot 2021-12-20 at 4.41.49 AM

小游戏：https://cssgridgarden.com/

上课例子

codesandbox