CSS之Grid布局

最新推荐文章于 2024-09-30 15:56:28 发布

努力的黑皮

最新推荐文章于 2024-09-30 15:56:28 发布

阅读量1.7k

点赞数 4

分类专栏： Javascript 前端 css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_53278262/article/details/122681010

版权

本文详细介绍了CSS Grid布局，包括结构划分、代码实现、网格规划、格子区域定位和隐形网格的概念。通过实例展示了如何使用Grid创建灵活的布局，并强调了在动态更新节点时的注意事项，以及如何通过grid-auto-columns和grid-auto-rows保持网格的一致性。

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

Grid专为布局而生。Flexbox是沿着两条轴排列分布，定义空间的分配。Grid则是把子结点布到网格中，这个网格可以是预设好的几行几列，也可能是自动生成的隐式的网格，总之头脑中始终要有一个“网格”的意象。Grid的规则属性很多，其中不乏一些是shorthands。我们需要先充分理解Grid模型，才能得心应手。在布局上，它绝对是一柄利器。兼容性前面说了，目前PC端上支持还是比较成熟的，移动端上不建议用。

结构划分以及组成

其中Gridline为网格线，Row为行，Column为列，Grid Cell为格子，Grid Area为网格区域。

代码实现

<div class="wrapper">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

努力的黑皮

关注关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS Grid布局

02-01

关于前端页面布局的开发大会ppt，讲解了CSS layout中的Grid

使用CSS Grid布局实现网格的流动

09-25

CSS Grid布局是一种二维网格系统，用于页面布局设计。它允许设计者将元素排列成行和列，通过定义网格轨道大小、网格间隙以及网格区域，实现复杂的布局效果。CSS Grid布局由CSS Grid布局属性定义，与传统的浮动布局...

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

【CSS】css grid 布局

Riptide

05-14

619

css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。比如我们要达到下面这样一个效果要怎么做？图中有16个元素，我们要其自适应宽度，按照我们以前的想法肯定是直接通过media，媒体查询来完成这个，但是代码肯定不会简洁，但是我们通过grid 布局只需要几行代码! 代码长这样：CSS：#container { display: grid; ...

最强大的 CSS 布局 —— Grid 布局

最新发布

每天都要努力学习哦~~

09-30

2640

应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。一些常见的 CSS 布局，如居中，两列布局，三列布局等等是很容易实现的。：可以简化重复的值。布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。上面例子的始终都是三列的，但是需求往往希望我们的网格能够固定列宽，并根据容器的宽度来改变列的数量。上面看到的效果中，右侧通常会留下空白，这是我们不希望看到的。

CSS之Grid网格布局

swimming_in_IT_的博客

05-31

1001

一：概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...

css的grid布局

wanghe1111_的博客

02-15

4348

grid布局即网格布局是一种二维布局，可以同时控制行和列的排布和对齐方式，grid布局由水平线和垂直线构成，两条水平线之间的区域叫做行轨道，两条垂直线的区域叫做列轨道。

CSS—— grid布局

mantou_riji的博客

05-14

6227

grid 是一个 CSS 简写属性，可以用来设置以下属性：显式网格属性 grid-template-rows、grid-template-columns 和 grid-template-areas，隐式网格属性 grid-auto-rows、grid-auto-columns 和 grid-auto-flow，间距属性 grid-column-gap 和 grid-row-gap。none：表示不明确的网格，所有的行和其大小都将由grid-auto-rows 属性隐式的指定。

CSS Grid网格布局

m0_65029152的博客

06-26

1678

记录一下前端的grid布局，一个很有趣的布局方法；

10分钟理解CSS3 Grid布局

09-22

CSS3 Grid布局是一种用于网页布局的二维布局系统，它由CSS工作组在2011年提出并不断完善。网格布局能够将网页划分成多个网格区域，通过...随着前端开发的不断发展，CSS3 Grid布局必将成为前端开发者的必备技能之一。

CSS Grid布局教程之网格单元格布局

12-13

前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家...

CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

12-13

上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语，为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不...

CSS grid 布局

学习笔记

03-25

688

CSS grid 布局 display: grid; grid-template-columns: 20% 60% 20%; grid-template-rows: 20% 20% 20% 20% 20%; grid-gap: 10px 10px;

CSS之grid布局

一只努力搬砖的打工妹纸

06-30

1571

grid布局

Css布局 Grid布局

qq_54855933的博客

08-01

2560

grid-template-areas 的属性值是一个或多个由空格分隔的字符串，每个字符串代表网格布局中的一行。函数：minmax(最小值，最大值) 函数允许你同时设置列（或行）的最小值和最大值。会创建两列，第一列长度为1fr，第二列的宽度至少为 100px，且不超过1fr。Grid布局，即网格布局，通过将容器划分为"行"和"列"来创建网格，然后将内容放置在网格的单元格中，咱们可以简单理解为二维布局。定义了网格线与网格项之间的间隙（grid-row-gap 和 grid-column-gap 的简写）。

CSS 之 grid 网格布局

weixin_45092437的博客

09-16

1981

设置display: grid;的元素，即为容器元素，容器属性共有17条，包含以下：grid-template-columns、grid-template-rows、column-gap、row-gap、gap等等容器的直接子元素即为项目元素，项目属性共有10条，包含以下：grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area、justify-self、align-self等等

【css】css中的 Grid 布局

呆呆狗

12-02

1335

css中的 Grid 布局

阮一峰老师 CSS Grid 网格布局教程(转载)

热门推荐

鸭绒的博客

09-30

3万+

特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。  <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.

CSS-grid布局

qq_41587763的博客

08-10

1616

上面写了9个元素，分别给了不同的颜色，根据 grid-template-columns和grid-template-rows或者grid-template-columns来设置他们的大小，这里的特殊就是，如果不给里面各个单元格大小，那么设置的列宽和行高就会去设置成每个单元格的大小，如果给了大小，那么设置的就是每个单元格之前的间距了。这里指的无限大也就是没有父级设置大小。grid布局就是将容器划分为行和列，产生单元格，然后在指定的单元格，可以看作是二维布局，我们一直经常用的flex布局也就可以看作一维布局。

CSS - 网格布局（grid）

程序员阿甘的博客

07-20

7122

网格布局、grid、表格布局、二维布局、网格轨道、grid-template-rows、grid-template-columns、grid-template、fr单位、min-content、max-content、minmax、auto-fill、auto-fit、网格单元、网格项目、网格线、grid-row、grid-column、grid-area、网格区域、grid-template-area、网格间距、gap、显示网格、隐式网格、稀疏包装、密集包装、网格单元对齐、网格项目对齐、统一对齐、单独对齐

快速掌握CSS3 Grid布局

"10分钟理解CSS3 Grid布局" 在前端开发中，CSS3 Grid布局是一个极其重要的工具，它提供了一种强大的二维布局机制，能够帮助开发者更高效地创建响应式和自适应的网页设计。本篇文章将简明扼要地介绍CSS3 Grid布局的...