百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

css grid 布局的那些事儿

xsobi 2024-11-23 10:47 1 浏览

CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年,随着更多浏览器的支持,它终于变得越来越流行。

接下来我们将了解下 CSS Grid 及其工作原理。了解下它如何使用。

CSS 网格简介

随着布局系统的不断发展,CSS 也取得了长足的进步。随着 CSS Grid 的发布,我们终于有了一个强大的工具来创建二维布局。如今,设计师和开发人员正在使用各种布局系统,如 Flexbox 甚至纯 CSS 来创建令人惊叹的响应式网站。但是当涉及到某些任务时,这些方法中的每一种都有其自身的局限性。在这种情况下,CSS Grid 可以派上用场!

CSS 网格架构

有两种使用 CSS 网格布局的方法:隐式和显式。使用隐式网格,您只需定义所需的列数,浏览器将自动创建网格。使用显式网格,您可以定义列数和行数。这使您可以更好地控制布局,但设置起来可能更复杂。

它是一个二维布局系统。这意味着它可以处理列和行。然而,与主要是一维的传统 CSS 布局不同,CSS Grid 旨在同时处理两个维度。

它是一个基于容器的布局系统。这意味着它适用于作为容器元素的子元素的元素。容器元素定义网格,子元素放置在网格单元格中。

它是一个响应式布局系统。这意味着它可以适应不同的屏幕尺寸和分辨率。CSS Grid 也很灵活,这意味着它可以用于从简单到复杂的各种布局。

它是在现有的 CSS 盒子模型之上构建的。这意味着它可以与任何现有的 CSS 代码库一起使用。但是,它还具有一些使其独一无二的新功能。

CSS Grid 独一无二的功能

  • 提供使用基于行的定位将项目放置在网格上的能力。这使得创建非常复杂的布局成为可能,而无需使用传统的浮动或绝对定位。
  • 提供跨越列和行的能力。换句话说,您可以拥有跨越多列或多行的项目。
  • 提供通过使用行号和名称或通过定位网格的特定区域将项目放置在特定位置的能力。还包括一个算法来控制未明确放置在网格上的项目的放置。
  • 提供控制项目放置在网格区域内后如何对齐以及网格整体对齐方式的能力。
  • 提供使用像素创建使用固定轨道大小的网格的能力 - 将网格设置为适合您所需布局的指定像素。您还可以使用百分比或 fr 单位来指定灵活的轨道大小。

所有这些功能在正确使用时都可以创建在任何屏幕尺寸上都能很好显示的响应式布局。

使用 CSS 网格的好处

在构建网页时使用 CSS Grid 有很多好处。主要好处之一是它可以更轻松地创建复杂的布局。使用 CSS Grid,您可以创建具有多列和多行的布局,并且可以轻松控制页面上每个元素的大小和位置。

CSS Grid 的另一个好处是它有助于保持代码整洁有序。使用传统的 CSS,您的代码很容易变得混乱且难以阅读。但是,使用 CSS Grid,您的所有样式都应用于网格,这使您的代码更易于阅读和理解。

创建网格布局

您需要首先定义一个容器元素并为其分配一个类名。此元素将包含您的所有内容。在容器内部,您将定义一系列子元素,每个子元素将占据网格的特定区域。您可以使用各种属性来控制这些元素的大小和位置。之后,将以下 CSS 代码添加到您的样式表中:

.container {
    display: grid;
}

这将创建一个网格布局,其中一列包含所有子元素。

网格父属性

网格父元素是应用了 display: grid 属性的元素。它可以是任何类型的元素。

网格父元素的属性:

  • grid-template-columns:此属性定义列数和每列的宽度。
  • grid-template-rows:此属性定义行数和每行的高度。
  • grid-gap:此属性定义列和行之间的空间。

网格子属性

CSS Grid 中的子属性用于定义网格项的大小、位置和其他方面。这些是可以应用于网格元素的一些主要子属性:

  • grid-column:此属性用于指定网格中列的大小和位置。此属性的语法是“ grid-column: ”。
  • grid-row:该属性用于指定行在网格中的大小和位置。此属性的语法是“ grid-row: ”。
  • grid-area:该属性用于指定网格中某个区域的大小和位置。此属性的语法是“ grid-area: ”。

使用列和行

网格允许您指定布局中的列数和行数,然后将元素放置在这些列和行中。

grid-template-columns 您可以使用和 grid-template-rows 属性控制列和行的宽度。例如,您可以使用以下代码创建三列布局:

.container {
    display: grid;
    grid-template-columns: 100px 200px 300px;
}

您还可以使用百分比或分数来控制列宽。例如,以下代码将创建三列,第一列的宽度是第二列的两倍,第三列的宽度是第三列的三倍:

.container {
    display: grid;
    grid-template-columns: 50% 33.33% 25%;
}

在布局中指定列数和行数后,您可以使用 grid-column 和 grid-row 属性将元素放置在这些列和行中。例如,如果您有一个三列布局,您可以使用以下代码在第一列中放置一个元素:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns, each 1/3 width of the container */
    grid-column: 1;
}

结论

如果你没有使用过 grid 布局,或者使用过,但是用的不多的话,那么我建议您可以多尝试下,因为当你用的多的时候,你就会发现,它是真的好用。

相关推荐

js向对象中添加元素(对象,数组) js对象里面添加元素

一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...

JS小技巧,如何去重对象数组?(一)

大家好,关于数组对象去重的业务场景,想必大家都遇到过类似的需求吧,这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一:使用.filter()和....

「C/C++」之数组、vector对象和array对象的比较

数组学习过C语言的,对数组应该都不会陌生,于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string,也是一种动态数组。能够在运行阶段设置vector对象的长度,可以在末...

如何用sessionStorage保存对象和数组

背景:在工作中,我将[{},{}]对象数组形式,存储到sessionStorage,然后ta变成了我看不懂的形式,然后我想取之用之,发现不可能了~记录这次深刻的教训。$clickCouponIndex...

JavaScript Array 对象 javascript的array对象

Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...

JavaScript中的数组Array(对象) js array数组

1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同,数组中可以存储一组有序的数据,-数组中存储的数据我们称其为元素(element)-数组中的每一个元素都有一...

数组和对象方法&数组去重 数组去重的5种方法前端

列举一下JavaScript数组和对象有哪些原生方法?数组:arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组,而是返回一个新数组...

C++ 类如何定义对象数组?初始化数组?linux C++第43讲

对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量,例如int...

ElasticSearch第六篇:复合数据类型-数组,对象

在ElasticSearch中,使用JSON结构来存储数据,一个Key/Value对是JSON的一个字段,而Value可以是基础数据类型,也可以是数组,文档(也叫对象),或文档数组,因此,每个JSON...

第58条:区分数组对象和类数组对象

示例设想有两个不同类的API。第一个是位向量:有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...

八皇后问题解法(Common Lisp实现)

如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢?这个著名的问题可以方便地通过一种树搜索方法来解决。首先,我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中,皇后可以沿...

visual lisp修改颜色的模板函数 怎么更改visual studio的配色

(defunBF-yansemokuai(tuyuanyanse/ss)...

用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀

1、首先请加载lisp程序,加载方法如下:在菜单栏选择工具——加载应用程序——添加,选择lisp程序然后加载,然后选择添加到启动组。2、然后是添加自定义栏以及图标,方法如下(以...

图的深度优先搜索和广度优先搜索(Common Lisp实现)

为了便于描述,本文中的图指的是下图所示的无向图。搜索指:搜索从S到F的一条路径。若存在,则以表的形式返回路径;若不存在,则返回nil。...

两个有助于理解Common Lisp宏的例子

在Lisp中,函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数;甚至可以和另一个Lisp函数组成一个整体,并加以利用。Lisp的宏,是实现上述特色的...