CSS--Gird布局

米格尔蒂亚

于 2023-09-18 08:34:30 发布

阅读量449

点赞数 1

文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_67968118/article/details/132962700

版权

Flex 布局和 Grid 布局都是 CSS3 中新增的布局方式

区别：

Flex 是一维布局系统，适合做局部布局，比如导航栏组件。
Grid 是二维布局(网格布局)系统，通常用于整个页面的规划。

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

容器和项目：我们通过在元素上声明 display：grid 来创建一个网格容器，这个元素的所有直系子元素将成为网格项目。

Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。

容器属性:

grid-template-columns 属性设置列宽，
grid-template-rows 属性设置行高

例：

<body>
    <div class="container">
      <div class="one item">One</div>
      <div class="two item">Two</div>
      <div class="three item">Three</div>
      <div class="four item">Four</div>
      <div class="five item">Five</div>
      <div class="six item">Six</div>
    </div>
  </body>

.container{
    display: grid;
    border: 3px solid red;

    /* 三个值代表设置三列并且值为200px */
    /*  声明列的宽度  */
    /* grid-template-columns: 200px 200px 200px; */
    grid-template-columns: repeat(3, 200px);

    /*  声明行的高度  */
    grid-template-rows: repeat(4, 100px);

    /*  声明行间距和列间距  */
    grid-gap: 20px;
}
.one {
    background: #19CAAD;
}

.two {
    background: #8CC7B5;
}

.three {
    background: #D1BA74;
}

.four {
    background: #BEE7E9;
}

.five {
    background: #E6CEAC;
}

.six {
    background: #ECAD9E;
}

.item {
    text-align: center;
    font-size: 200%;
    color: #fff;
}

在这里插入图片描述

项目属性:

1、grid-column-start

项目左边框所在的垂直网格线

grid-column-start: 1;     // 1为左边框从第一根开始

2、grid-column-end

项目右边框所在的垂直网格线

grid-column-end: 2;      // 2为右边框从在二根结束

简写：

grid-column: 1 / 2;

3、grid-row-start

项目上边框所在的水平网格线

grid-row-start: 1;     // 1为上边框从第一根开始

4、grid-row-end

项目下边框所在的水平网格线

grid-row-end: 2;     // 2为下边框从在二根结束

简写：

grid-row: 1 / 2;

例：

.one {
    background: #19CAAD;
    /* grid-column-start: 1;
    grid-column-end: 3; */
    grid-column: 1/3;
    
/* 
    grid-row-start: 1;
    grid-row-end: 3; */
    grid-row: 1/3;
}

.two {
    background: #8CC7B5;
    /* grid-column-start: 2;
    grid-column-end: 4; */
    grid-column: 2/4;

/* 
    grid-row-start: 1; */
    grid-row: 13;
}

.three {
    background: #D1BA74;
}

.four {
    background: #BEE7E9;
}

.five {
    background: #E6CEAC;
}

.six {
    background: #ECAD9E;
}

.item {
    text-align: center;
    font-size: 200%;
    color: #fff;
}