8.网络布局

在这里插入图片描述
display属性:定义网格容器
.grid-container{
display: grid; }

grid-template-columns和grid-template-rows属性
划分网格的行和列,取值:px、%、auto、fr、repeat()函数
在这里插入图片描述

 <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属性

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

<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:列间距

  1. 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:整个内容区域在容器里面的水平位置
justify-content: start | end | center | stretch | space-around | space- between | space-evenly;
(2)align-content:整个内容区域的垂直位置
align-content: start | end | center | stretch | space-around | space- between | space-evenly;

(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属性: 按照先水平方向排列还是垂直方向排列。

在这里插入图片描述
在这里插入图片描述

<!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>

在这里插入图片描述

相关推荐

  1. 网格布局 Grid

    2024-03-15 19:06:02       58 阅读
  2. 网格布局 grid

    2024-03-15 19:06:02       32 阅读
  3. LVGL网格布局测试

    2024-03-15 19:06:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 19:06:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 19:06:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 19:06:02       87 阅读
  4. Python语言-面向对象

    2024-03-15 19:06:02       96 阅读

热门阅读

  1. UDP-创建群聊

    2024-03-15 19:06:02       35 阅读
  2. Redis的持久化——深入探究底层原理

    2024-03-15 19:06:02       41 阅读
  3. 虚方法的定义和使用

    2024-03-15 19:06:02       41 阅读
  4. TCP的三次握手和四次挥手

    2024-03-15 19:06:02       39 阅读
  5. qt5-入门-主窗口设计1

    2024-03-15 19:06:02       42 阅读
  6. tkinter页面及treeview布局

    2024-03-15 19:06:02       34 阅读
  7. 对象转数组,数组转对象的常用方法

    2024-03-15 19:06:02       43 阅读
  8. 每天一个数据分析题(一百九十九)

    2024-03-15 19:06:02       46 阅读
  9. 小米消金坚持打防并举,持续筑牢反诈坚实堤坝

    2024-03-15 19:06:02       35 阅读
  10. C++ 智能指针的正确使用方式:unique_ptr VS shared_ptr

    2024-03-15 19:06:02       34 阅读
  11. k8s的pod服务升级,通过部署helm升级

    2024-03-15 19:06:02       43 阅读
  12. axios 请求 url 地址,判断网络地址是否存在

    2024-03-15 19:06:02       42 阅读
  13. 面试经典-26-Z 字形变换

    2024-03-15 19:06:02       42 阅读