css grid学习记录

.grid{
    display: grid;
    grid-template-columns: repeat(4,100px);
    grid-template-rows:repeat(5, 100px);
    /* grid-template-rows: auto; */
/*     grid-template-areas: 
        "header header header header"
        "main main . sidebar"
        "footer footer footer footer"; */
    /* grid-column-gap: 30 px; */
    /* grid-row-gap: 15px; */
    grid-gap: 30px 15px;
    background-color: aqua;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    height: 1400px;  
}

.column, .item{
    background-color: red;
    color: coral;
    font-size: 4em;
}

.item-2{
    background-color: blue;
    grid-area: 1 /3 /span 4 /span 2;
    /* justify-self: start; */
    /* align-self: end; */
    place-self: center start;
}

css -grid用于布局表格

表格有容器与子项(grid and grid items)

定义容器:  display : grid;

justify 指的是X轴方向

align Y轴方向

items 子项的每一项

content 将所有子内容当做一个整体

justify-items  每一子项X方向对齐（水平） 等同一每一子项的justify-self

 align-items  每一子项Y方向对齐（垂直）等同于每一子项的align-self

justify-content: 整体子项X对齐

align-content: 整体子项Y对齐