css3网格布局

最新推荐文章于 2025-10-30 21:58:36 发布

原创最新推荐文章于 2025-10-30 21:58:36 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解网格布局(grid layout)作为Flex布局的升级版，如何通过简单的属性设置，如grid-template-columns、grid-template-rows等，实现复杂网页布局的设计。文章详细解析了父级和子元素的属性设置，帮助读者掌握网格布局的精髓。

网格布局是flex的升级版

父级属性display: grid;即可把这个div变成网格；

父级属性grid-template-columns: 20% 20% 20% 20%;设置有多少列，每列有多宽。auto自动填；1fr 2fr 设置比例倍数；

父级属性grid-template-rows: 200px 200px 100px 300px;设置每行有多高。auto自动填充；

父级属性grid-gap: 10px 20px ;设置上下左右外边距；

父级属性：内容区域：align-items（垂直）、justify-items（水平）整体区域：align-content、justify-content；

grid-auto-flow: row dense;先行后列，尽可能填充紧密。

子属性grid-column-start：左边框所在的垂直网格线；上下左右线构成一个区域，以线为划分哦。

子属性grid-column-end：右边框所在的垂直网格线

子属性grid-row-start：上边框所在的水平网格线

子属性grid-row-end：下边框所在的水平网格线

子属性grid-row-start: span 3;列开始长度为3

子属性grid-column-start: span 2;行开始长度为2

简单来说，我们通过设置grid创建一个网格。规定好行列，再设计小方块占据宽高有多大，随意搭配，完成想要的样式。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

guapiCat

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

安卓讲课笔记3.4 网格布局

howard2005的专栏

10-24

2089

1. 了解网格布局特点； 2. 熟悉网格布局常用属性； 3. 掌握线性布局嵌套网格布局

css3新增-网格Grid布局

qq_43260366的博客

09-12

969

定义网格的行结构和列结构grid-template-columns：定义网格的列结构和每列的宽度；grid-template-rows：定义网格的行结构和每行的宽度；其强大之处在于它的属性值是非常灵活的这两个属性的语法完全相同，只是方向不同，在此使用columns进行展示。

参与评论您还未登录，请先登录后发表或查看评论

《十二》CSS3 Grid 网格布局

花铛

12-09

3058

网格布局将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

CSS3学习之网格布局grid

最新发布

qq_69510169的博客

10-30

993

Grid 布局适合整体页面框架、卡片网格、仪表盘等复杂布局场景，与 Flexbox 配合使用可覆盖绝大多数布局需求。效果：顶部通栏Header，左侧固定宽度Sidebar，右侧自适应Main。解释：自动填充尽可能多的列，每列最小200px，空间不足时换行。表示三列，第一列固定宽度，后两列按比例分配剩余空间。当网格总尺寸小于容器时，控制整个网格的对齐方式（如。将元素定义为网格容器，子元素自动成为网格项。定义网格的列和行大小。（行起始/列起始/行结束/列结束）。例如，创建 3 列，每列宽度为。

css3 实现网格布局

m0_38066007的博客

11-26

251

1 <!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> * { margin: 0;

css3之网格布局

qq_42628504的博客

08-23

760

一网格布局（Grid）是最强大的 CSS 布局方案。本文参考自阮一峰的网络日志 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别

创意css3网格布局带动画效果.rar

11-17

这个“创意css3网格布局带动画效果”的压缩包文件包含了一个使用CSS3实现的创新网格布局，同时结合了动画效果，提升了用户体验。下面我们将详细探讨相关的知识点。 1. CSS3 Grid Layout（网格布局）： CSS3 Grid...

css3响应式图片网格布局

12-13

本资源“css3响应式图片网格布局”正是基于这个理念，利用CSS3的强大功能来实现一个灵活且适应性强的图片展示系统。在这个模板中，透明背景的运用为设计增添了一分现代感，同时也允许内容与背景产生互动，增强了视觉...

CSS3网格的三个新特性详解

12-10

CSS3网格布局还支持自动填充和扩展，使得内容自适应网格变得更加容易。这个特性在现代浏览器中得到了广泛支持，但对于老版本浏览器，可能需要借助于CSS预处理器或使用回退方案。总结起来，CSS3的这三个新特性——`...

CSS3网格布局

MyBlog

05-17

438

简介 网格布局可以将容器划分为各种网格，可以对这些网格进行任意的组合，组成网格分界线的有行网格线和列网格线，由两两相邻的行网格线和列网格线组成的单元格叫做网格单元格。注意：划分的网格并不是div，div存在与划分的网格之中，具体看以下实例。 <div class="container"> <div class="d1">1</div> <div class="d2">2</div> <

Css3 - Grid网格布局

yxyCyndi的博客

01-29

3036

Grid - 二维网格布局Grid - 二维网格布局 一介绍原理基础概念浏览器支持二重要术语 grid container网格容器 grid Item网格项 grid line 网格线 grid track网格轨道 grid cell网格单元 grid area网格区域三所有网格容器属性和网格元素属性四grid container 属性 display grid inline-grid

css3 网格布局及新增样式(前端必学二)

xuemen11的博客

03-15

916

javascript,html5css3,网格布局，css3新属性

CSS3 网格布局 （十）

qq_42502919的博客

01-22

330

CSS3 网格布局 （十）标签（空格分隔）：前端学习网格是由一系列水平及垂直的线构成的一种布局模式，可以帮助我们设计一些列具有固定位置以及宽度的元素的页面。定义一个网格要将容器定义为网格布局，要设置.app{display: grid}，此代码创建了一个只有一列的网格，即子项还是会想正常布局流一样从上向下排布，再在.app中添加grid-template-columns: num num num此时就定义的一个三列的网格。使用fr来灵活的定义网格使用fr灵活定义网格与普通定义不同的地方：gr

CSS3 grid网格布局

xiangxiongfly

04-26

1544

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。

现今 CSS3 最强二维布局系统 Grid 网格布局

qq_73220073的博客

10-13

2072

Grid 布局是一个基于网格的二位布局系统，是目前 CSS 最强的布局系统，它可以同时对列和行进行处理（它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局） CSS3 最强布局系统 Grid 布局二维布局系统

test

weixin_33869377的博客

04-02

166

在这篇文章中，我们将来看一些CSS3新属性，从而用HTML和CSS处理网格的时候更容易。但首先让我们讨论一点HTML和CSS网格的历史，了解清楚为什么以前很困难。网格简史曾几何时，我们的布局是一团糟。表格和框架是用于创建多列布局的主要工具。虽然他们能完成工作（但其实非常糟糕）。把目光投向今天。HTML和CSS已经变得非常复杂，Web设计的知名度和复杂度与日俱增。我们曾经使用的旧的...

Css3新布局---Grid网格

m0_66711291的博客

08-02

2800

网格布局是css3中新增加的一种布局方式，比flex更加强大。flex属于一维布局，对于高度不能灵活控制。grid网格布局是二维布局，通过行和列来分配网页空间。通过下面这个小游戏可以简单体会到网格布局的强大。...

CSS3 网格布局

m0_57545130的博客

07-25

1049

CSS 网格布局是一种基于网格的布局系统，允许开发者将页面划分为行和列，形成一个网格结构。CSS3 网格布局（Grid Layout）是一种强大的二维布局系统，用于创建复杂的网页布局。与 Flexbox（一维布局，适合单行或单列）不同，网格布局是二维的，适合同时处理行和列的布局需求。以下是一个简单的网格布局示例，展示一个包含头部、侧边栏、主要内容和底部的页面结构。的元素是网格容器，其直接子元素会成为网格项（Grid Items）。以下是网格布局常用的 CSS 属性，分为容器属性和网格项属性。