css样式 grid布局 一种网格布局方式

1、配置文件

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-rows: repeat(7, 80px);
  place-content: center;
  gap: 6px;
  height: 100vh;
}

.grid-container div:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 / 4;
  background: coral;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
}

.grid-container div:nth-child(2) {
  grid-column: 1 / 3;
  grid-row: 3 / 6;
  background: cornflowerblue;
  clip-path: polygon(0 34%, 100% 11%, 100% 80%, 0% 69%);
}

总结 用到的 css属性有： clip-path：裁剪路径； clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);polygon 是多边形，裁剪多边形；

grid-area，grid-column，grid-row 是子孩子的属性

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname; grid-column: grid-column-start / grid-column-end; grid-row: grid-row-start / grid-row-end; 例子：grid-column:1/3; grid-row:3/5;

grid-template-areas, column-gap，grid-template-columns，grid-template-rows 都是父亲的属性

grid-template-columns 几列，每列多宽, grid-template-rows 几行 每行多高

//例子
grid-template-columns: repeat(3, 150px); grid-template-rows: repeat(7, 80px);
//例子
grid-template-areas:
 "header header header"
     "navigation navigation navigation"
     ". . ."
     ". content .";
 .header {
   grid-area: header;
 }
 .navigation {
   grid-area: navigation;
 }
 .content {
   grid-area: content;
 }