CSS 网格布局示例

网格定义

    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 400px 200px 100px;
A
B
C
D
E
F

网格区域

    display: grid;
    grid-template-areas: "header  header"
                         "sidebar main  "
                         "sidebar footer";
页眉
侧边栏
主内容
页脚

项目放置

    display: grid;
    grid-template-rows: repeat(4, 100px);
    grid-template-columns: repeat(4, 150px);
grid-row: 3;

grid-column: 2;
grid-row: 2 / 5;

grid-column
3 / span 2;

对齐

网格轨道对齐

    display: grid;
    grid-template-rows: 100px 100px;
    grid-template-columns: 150px 150px 150px;
    height: 500px;
    width: 650px;
    align-content: center;
    justify-content: space-evenly;
grid-row: 1;

grid-column: 1 / 3;
grid-row: 1 / 3;

grid-column: 3;
grid-row: 2;

grid-column: 1;
grid-row: 2;

grid-column: 2;

网格项目对齐

    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 400px 400px;
align-self: stretch;

justify-self: stretch;
align-self: end;

justify-self: start;
grid-column: span 2;

align-self: center;

justify-self: center;

响应式设计

    display: grid;
    grid-gap: 10px 20px;
    grid-template-rows: 100px 1fr auto;
    grid-template-columns: 1fr 200px;
    grid-template-areas: "header  header"
                         "content aside "
                         "footer  aside ";

    @media (max-width: 600px) {
        grid-gap: 0;
        grid-template-rows: auto 1fr auto auto;
        grid-template-columns: 1fr;
        grid-template-areas: "header "
                             "content"
                             "aside  "
                             "footer ";
    }