grid 网格布局

最新推荐文章于 2023-04-22 09:52:32 发布

Jiuto_crx

最新推荐文章于 2023-04-22 09:52:32 发布

阅读量262

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Jiuto_crx/article/details/115284973

版权

本文详细介绍了CSS Grid布局的基本概念，包括容器属性如grid-template-columns/rows、grid-gap、grid-template-areas、grid-auto-flow等，以及项目属性如grid-column/row、grid-area等。此外，还讨论了浏览器兼容性和相关布局策略。

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

grid 网格布局

基本概念

采用栅格布局display:grid 或 inline-grid的元素称为容器，其直接子元素称为项目。

在这里插入图片描述

设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

容器属性

grid-template-columns grid-template-rows

grid-template-columns 定义列宽， grid-template-rows 定义行高。

<div class="parent">
    <div class="child" style="background-color: #b574c3;">child1</div>
    <div class="child" style="background-color: #8b76c1;">child2</div>
    <div class="child" style="background-color: #5171c4;">child3</div>
    <div class="child" style="background-color: #51cd8f;">child4</div>
    <div class="child" style="background-color: #9fd364;">child5</div>
    <div class="child" style="background-color: #d8ac4e;">child6</div>
    <div class="child" style="background-color: #d93a52;">child7</div>