8.网络布局 - 技术栈

display属性：定义网格容器

.grid-container{

display: grid; }

grid-template-columns和grid-template-rows属性

划分网格的行和列，取值：px、%、auto、fr、repeat()函数

html 复制代码

 <style>
    .grid-container {
    width:300px;
    height:300px;
    border:1px dashed;
    display: grid;
    grid-template-rows:30px 1fr 1fr;
    grid-template-columns:1fr 1fr 1fr;}
    .grid-item {border:1px solid;}
  </style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>

grid-template-areas属性

命名单元格，具有相同区域名称的单元格被划分为一个区域

html 复制代码

<style>
    .grid-container{
display: grid;
grid-template-rows:30px 1fr 1fr;
grid-template-columns:1fr 1fr 1fr;
grid-template-areas:
"navbar navbar navbar"
"sidebar content content"
"sidebar content content ";
width: 300px;
height: 300px;
border:1px dashed;
}
.grid-item{
border: 1px solid;
}
.grid-item:nth-child(1){
grid-area : navbar;
}
.grid-item:nth-child(2){
grid-area : sidebar;
}
.grid-item:nth-child(3){
grid-area : content;
}

  </style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div> <div class="grid-item">3</div>

</div>

</body>

grid-gap 属性

grid-gap： grid-row-gap grid-column-gapgrid-row-gap:行间距， grid-column-gap：列间距

justify-items、 align-items、place-items 属性

justify-items、align-items、place-items属性用于设置网格元素在网格中的位置。

（1）justify-items:单元格内容的水平位置

justify-items : start | end | center | 默认stretch;

（2）align-items:单元格内容的垂直位置

align-items : start | end | center | 默认stretch;

place-items: align-items属性 justify-items属性;

justify-content、 align-content、place-content 属性

justify-content、align-content、place-content 属性用于设置整个内容区域在容器里面的位置。

（1）justify-content:整个内容区域在容器里面的水平位置

（2）align-content:整个内容区域的垂直位置

（3）place-content :justify-content属性 align-content属性

grid-auto-rows | grid-auto-columns | grid-auto-flow属性

这些属性表示当定义的行或列数量不够时，网格元素的自动排列方式。

（1）grid-auto-columns属性：多出的网格元素的自动列宽。

（2）grid-auto-rows属性：多出的网格元素的自动行高。

（3）grid-auto-flow属性：按照先水平方向排列还是垂直方向排列。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0; /* 去除默认边距 */
            height: 100vh; /* 使body充满整个视口 */
            display: flex;
            align-items: center;
            justify-content: center; /*垂直居中对齐*/
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(3, 1fr);
            border: 1px dashed;
            width: 300px;
            height: 300px;
        }

        .grid-item {
            border: 10px solid;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;/*这些属性确保了数字和块的边界对齐，并使其沿着左上角的方向布局。*/
            background-color: lightgrey; /* 设置灰色背景 */
            padding: 10px; /* 添加内边距 */
            margin: 5px; /* 添加外边距，增加块之间的距离 */
        }

        .grid-item span {
            margin-top: -10px; /* 负边距用于微调数字位置 */
        }

        .grid-item:nth-child(1) {
            grid-column: 1/3;
            grid-row: 1 / 2;
        }

        .grid-item:nth-child(2) {
            grid-column: 3/5;
            grid-row: 1/3;
        }

        .grid-item:nth-child(3) {
            grid-column: 5/6;
            grid-row: 1 / 2;
        }

        .grid-item:nth-child(4) {
            grid-column: 6 /7;
            grid-row: 1 / 2;
        }

        .grid-item:nth-child(5) {
            grid-column: 1/2;
            grid-row: 2/4;
        }

        .grid-item:nth-child(6) {
            grid-column: 2 /3;
            grid-row: 2/3;
        }

        .grid-item:nth-child(7) {
            grid-column: 5 / 6;
            grid-row:2/3;
        }

        .grid-item:nth-child(8) {
            grid-column: 6 / 7;
            grid-row: 2/4;
        }

        .grid-item:nth-child(9) {
            grid-column: 2 / 4;
            grid-row: 3 / 4;
        }

        .grid-item:nth-child(10) {
            grid-column: 4 / 5;
            grid-row: 3 / 4;
        }

        .grid-item:nth-child(11) {
            grid-column: 5 /6;
            grid-row: 3 / 4;
        }
    </style>
</head>
<body>
<div class="grid-container">
    <div class="grid-item"><span>1</span></div>
    <div class="grid-item"><span>2</span></div>
    <div class="grid-item"><span>3</span></div>
    <div class="grid-item"><span>4</span></div>
    <div class="grid-item"><span>5</span></div>
    <div class="grid-item"><span>6</span></div>
    <div class="grid-item"><span>7</span></div>
    <div class="grid-item"><span>8</span></div>
    <div class="grid-item"><span>9</span></div>
    <div class="grid-item"><span>10</span></div>
    <div class="grid-item"><span>11</span></div>
</div>
</body>
</html>