15-【CSS全解】CSS布局（grid网格布局）

这里写目录标题

• • css trick
  • 父元素
  • 分行分列
  • 子元素设 行列起终值
  • 按份分布 fr free space
  • 间隔 省去负margin
  • grid-template-areas 可以定义区域结合grid-area
  • 主要适合不规则排版 练习模仿淘宝 先划分区域
  • grid网格布局小游戏 https://cssgridgarden.com/#zh-cn

css trick

https://css-tricks.com/

父元素

二维布局 grid父 容器 子grid items

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

分行分列

.container{
  min-height:400px;
  display:grid;
  grid-template-columns:50px 20px 30px;
  grid-template-rows:30px 50px 30px;
}
           

子元素设 行列起终值

.a{
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}
           

按份分布 fr free space

grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:2fr 1fr 1fr;
           

间隔 省去负margin

grid-column-gap:10px;

.container{
  min-height:400px;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:2fr 1fr 1fr;
  grid-gap:10px;
}
           

grid-template-areas 可以定义区域结合grid-area

*{
  margin: 0;
  padding: 0;
  box-sizing:border-box;
  border:1px solid red;
}
.container{
  display:inline-grid;
  grid-template-rows:60px auto 60px;
    grid-template-columns:60px auto 60px;
  grid-template-areas:
    "header header header"
    "aside main rside"
    "footer footer footer"
}
header{
  grid-area:header;
}
aside{
  grid-area:aside;
}
main{
  grid-area:main;
}
rside{
  grid-area:rside;
}
footer{
    grid-area:footer;
}
           

## 中间为空不显示时 用.或者x

grid-template-areas:
    "header header header"
    "aside main rside"
    ". footer footer"
}
           

主要适合不规则排版 练习模仿淘宝 先划分区域

http://js.jirengu.com/cimefoputa/4/edit?html,css,output

.container {
  display: grid;
  min-height: 100vh;
  min-width: 100vh;
  grid-template-rows: 240px repeat(4, 60px);
  grid-template-columns: 250px 250px;
  // grid-column-gap:10px;
  grid-template-areas: "big sm4" "big md1" "sm1 md1" "sm2 md2" "sm3 md2"
}
img:nth-child(1) {
  grid-area: big;
  background: #ccc;
}
img:nth-child(2) {
  grid-area: sm1;
  background: #bbb;
}
img:nth-child(3) {
  grid-area: sm2;
  background: #aaa;
}
img:nth-child(4) {
  grid-area: sm3;
  background: #333;
}
img:nth-child(5) {
  grid-area: sm4;
  background: #666;
}
img:nth-child(6) {
  grid-area: md1;
  background: #ddd;
}
img:nth-child(7) {
  grid-area: md2;
  background: #888;
}
           

grid网格布局小游戏 https://cssgridgarden.com/#zh-cn

用span关键字

grid-column-end/start:span 2 //跨两列
           

grid-column: 2 / 4;就会设置网格项从第二列开始，到第四列结束。

grid-column:2/ span 3

grid-area：grid-row-start/grid-column-start/grid-row-end//grid-column-end

#garden {
  display: grid;
  grid-template-columns:50% 50%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}
#water {
  grid-column: 1;
  grid-row: 1;
}
           

grid-template-columns: repeat(5, 20%);

grid-template: 50% 50% / 200px;将创建一个具有两行的网格,每一行占据50%，以及一个200像素宽的列