CSS（四）详解Grid布局

最新推荐文章于 2024-08-16 17:14:08 发布

fullstack_lth

最新推荐文章于 2024-08-16 17:14:08 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/u014744118/article/details/99658494

版权

本文是CSS布局系列的第四部分，重点介绍了Grid布局，包括容器属性如grid-template-row、grid-template-columns、grid-template-areas等，以及项目属性如grid-column-start、grid-column-end等。Grid布局是一种强大的二维布局方式，与Flex布局不同，它分为行和列，适用于复杂网页设计。文章通过实例解释了各种属性的用法，并提供了参考资料。

摘要由CSDN通过智能技术生成

这是一个系列的文章，你也可以查看其他文章：

0、CSS-预热篇

1、CSS（一）详解position

2、CSS（二）transform

3、CSS（三）flex布局（flex弹性布局详解）

4、CSS（四）详解Grid布局

5、CSS（五）CSS动画-transition简介

6、CSS（六）CSS动画-animation简介

7、CSS（七）两栏布局详解

Grid布局又叫做网格布局。是一种强大二维布局，Flex布局是一维布局。

Grid布局和Flex布局类似，Grid布局也分容器和项目两部分。但和Flex不同的是，在容器内部，分为row和column（而不是Flex布局的轴和交叉轴），row和column交叉的部分叫cell，划分cell的线叫做gridline。

正常情况下，n（n>=1）行和m(m>=1)列的布局产生n*m个单元格（cell），n行（列）有n+1条girdline（网格线），例如3行和3列的布局有9个单元格，有16条网格线。

IE浏览器目前不支持grid布局，其他浏览器对于grid相关属性的详细兼容情况请查看：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

容器属性

grid-template-row/grid-template-column
grid-template-areas
row-gap/column-gap/gap
grid-auto-flow
justify-items ，align-items ，place-items
justify-content ，align-content ，place-content
grid-auto-columns ，grid-auto-rows
grid-template ，grid

项目属性

grid-column-start ，grid-column-end ，grid-row-start ，grid-row-end
grid-column ，grid-row
grid-area
justify-self ，align-self ，place-self

下面分别介绍：

当然首先先要设置容器属性为grid，如下所示：

div {
    display: grid;
}

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {
  display: inline-grid;
}

那么grid属性有没有什么需要注意的点呢？请看下面的小实验,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 500px;
            border: 1px solid darkgray;
            background: lightgreen;
            padding: 10px;
        }
        .item{
            height:100px;
            width: 100px;
        }
        .item-inner{
            background: darkred;
            height: 20px;
            width: 30px;
        }
        .item:nth-child(1){
            /* display: grid; */
            background: darkblue;
        }
        .item-float{
            float: right;
        }
        .item:nth-child(2){
            /* display: grid; */
            background: darkmagenta;
        }
        .item-inline-block{
            display: inline-block;
        }
        .item:nth-child(3){
            /* display: grid; */
            background: darkgoldenrod;
            vertical-align:middle;
        }
        .item-table-cell{
            display: table-cell;
        }
        
        .item:nth-child(4){
            /* display: grid; */
            background: lightcoral;
        }
        .item-vertical-align{
            vertical-align:middle;
        }
        .item:nth-child(5){
            /* display: grid; */
            background: yellow;
            column-count: 3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="item-inner">1-1</div>
            <div class="item-inner item-float">1-2</div>
            <div class="item-inner">1-3</div>
        </div>
        <div class="item">
            <div class="item-inner">2-1</div>
            <