grid布局```css // 定义列 grid-template-columns grid-template-colu

// 定义列
grid-template-columns
grid-template-columns: 100px 100px 100px;
// 定义行
grid-template-rows
// repeat重复
grid-template-columns: repeat(3, 100px);
// auto-fill自动填充
grid-template-columns: repeat(auto-fill, 100px);
// fr(fraction)片段,等分成四份
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 2fr 3fr;
// minmax设置宽度最小值
grid-template-columns: 1fr minmax(300px, 1fr);
// auto自动宽度
grid-template-columns: 100px auto 100px;
// []中定义线的名字
grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
// 行间距
row-gap: 20px;
// 列间距
column-gap: 20px;
// 简写间距(行 列)
gap:20px 20px
// 给容器命名
// .表示匿名
grid-template-areas: 'a . c' 'd e f' 'g h i';
// 放到对应的容器
grid-area: b;
// 简写grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写
grid-area:1/1/3/3;
// 容器的排列顺序
// dense 排列紧凑
grid-auto-flow: row dense;
// 单个物体的 水平方向对齐
justify-items: center;
// 单个物体的 垂直方向对齐
align-items: center;
// 简写
place-items: center center;
// 整体的水平对齐
justify-content: center;
// 整体的垂直对齐
align-content: center;
// 超出定义的行,自动增长行的高度
grid-auto-rows: 200px;
// 列开始
grid-column-start: 1;
// 列结束
grid-column-end: 3;
// 简写,/不是除号,起分隔作用
grid-column: 1 / 3;
grid-row: 1 / 3;
// span 右占2格
grid-column-start: span 2;
// span 左占2格
grid-column-end: span 2;
// 自己定位
justify-self:center

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="grid.css">
    <title>Document</title>
</head>

<body>
    <div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
</body>
<script>
</script>

</html>

.main {
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    /* grid-template-columns: 100px 100px 100px; */
    /* grid-template-columns: repeat(3, 100px); */
    /* grid-template-columns: repeat(auto-fill, 100px); */
    /* fraction 片段 */
    /* grid-template-columns: repeat(3, 1fr); */
    /* grid-template-columns: 1fr 2fr 3fr; */
    /* grid-template-columns: 1fr minmax(300px, 1fr); */
    /* grid-template-columns: 100px auto 100px; */
    grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
    grid-template-rows: 100px 100px 100px 100px;
    /* row-gap: 20px;
    column-gap: 20px; */
    gap: 20px 20px;
    grid-template-areas: 'a a a' 'b b b' 'g h i';
    /* grid-auto-flow: row dense; */
    /* justify-items: center;
    align-items: center; */
    /* place-items: center center; */
    /* justify-content: center;
    align-content: center; */
    /* grid-auto-rows: 200px; */
}

.item {
    color: #ffffff;
    font-size: 50px;
}

.item-1 {
    background-color: red;
    /* grid-column-start: 1;
    grid-column-end: 3; */
    /* grid-column: 1 / 3;
    grid-row: 1 / 3; */
    /* grid-column-start: span 2; */
    /* grid-area: b; */
    /* grid-area: 1/1/3/3; */
    /* justify-self: center; */
}

.item-2 {
    background-color: blue;
}

.item-3 {
    background-color: skyblue;
}

.item-4 {
    background-color: pink;
}

.item-5 {
    background-color: peru;
}

.item-6 {
    background-color: burlywood;
}

.item-7 {
    background-color: darkcyan;
}

.item-8 {
    background-color: darkorange;
}

.item-9 {
    background-color: darkkhaki;
}

.item-10 {
    background-color: aqua;
}