css(3)grid网格布局总结

最新推荐文章于 2024-09-12 01:25:48 发布

Elinkers

最新推荐文章于 2024-09-12 01:25:48 发布

阅读量394

点赞数

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/Echianer/article/details/112510092

版权

本文总结了CSS Grid布局，包括display:grid的使用，以及在父元素设置的显式网格、隐式网格和间距属性，如grid-template-columns、grid-template-rows、grid-template-areas、grid-auto-flow等，并介绍了子元素的grid-area属性。CSS Grid提供了一种二维布局方法，适用于复杂布局设计。

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

文章目录

前言
一、display:grid
二、grid网格模型属性（在父元素设置）
三、在子元素设置
- 1.grid-area
总结

前言

网格布局也是比较常用的布局方法，相比于flex，grid能够在两个轴上进行操作(flex依靠单轴操作)。不过相比较felx，grid的兼容性问题也很麻烦。

参考文档MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

一、display:grid

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
    
            display: grid;
            grid: repeat(2, 60px) / auto-flow 80px;
        }

        #container>div {
    
            background-color: #8ca0ff;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>