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

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


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>
相关推荐
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
paid槮11 小时前
HTML5如何创建容器
前端·html·html5
拾光拾趣录12 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚14 小时前
物理像素&逻辑像素&DPR
css
还是大剑师兰特20 小时前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号20 小时前
css position
前端·css·html
鲸落✗21 小时前
黑色风格音乐播放器网站模板(附完整源码)
前端·html·web
东华果汁哥21 小时前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html
PanZonghui21 小时前
移动端适配全景指南:从原理到实战的完整解决方案
前端·javascript·css
PanZonghui1 天前
告别布局困惑:彻底搞懂CSS标准盒模型与IE盒模型
前端·css