图文详解CSS中的Grid布局,你真的可以5分钟掌握

作者 : 开心源码 本文共1174个字,预计阅读时间需要3分钟 发布时间: 2022-05-12 共219人阅读

前言

网站的布局是一个网站设计的根本,CSS的Grid布局已经成为了未来网站布局的基本方式。

今天这篇文章我们通过图文,一起看看如何自己实现Grid布局方式。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS

第一个Grid布局

首先我们看看最基本的Grid布局是什么样的,HTML页面的代码如下所示。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

HTML代码

而后设置其CSS属性,这里主要展现容器的CSS属性,给子元素增加的color属性就不在这里展现了。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS属性

在页面上看到的效果如下,目前由于没有对子div元素做任何设置,会自动将子div沿垂直方向排列。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

页面效果

设置行和列

为了让外层的div(wrapper)为一个网格容器,需要设置其行数和列数,就像一个表格一样。

此时就需要用到grid-template-columns和grid-template-rows两个属性值。

  • grid-template-columns

用于设置网格容器的列属性,其实就相当于列的宽度。当我们需要几列展现时,就设置几个值,这个属性可以接收具体数值比方100px,也可以接收百分比值,表示占据容器的宽度。

需要注意的是:当给容器设定了宽度时,grid-template-columns设定的百分比值是以容器的宽度值为基础计算的。假如未设置宽度时,会一直向上追溯到设置了宽度的父容器,直到body元素。

比方我们设置了以下的CSS属性。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS属性

可以看出三列宽度加起来的百分比值为120%,而且wrapper容器并未设置宽度,会一直向上追溯到body元素,这样三列的总宽度已经超过了body的宽度,因而会出现滚动条。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

页面效果

  • grid-template-rows

用于设置网格容器的行属性,其实就相当于行的高度,其特性与grid-template-columns属性相似。

下面简单修改grid-template-columns和grid-template-rows两个属性的值。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS值

得到的效果图如下所示。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

效果图

放置子元素

接下来我们看看别的情况,通过CSS属性设置3*3的网格。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS属性

在页面上的呈现方式如下所示。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

页面呈现

从页面上看我们看不出有什么问题,但是打开控制台后可以发现,这个网格已经占据了3*3的空间。它后面的元素只能排列在所有的网格后面。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

页面实际情况

不规则排列

当我们需要得到特殊的排列方式,比方占满整行,占满整列,二三行合并等等。

这就需要用到grid-column和grid-row属性,表示行网线和列网线的序号。通过设置start和end值,来进行网格的合并。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

网线序号

我们重新给wrapper容器内部的div增加class类。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

HTML代码

而后增加以下的CSS代码,给不同的网格特定的行号和列号。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

CSS代码

最终得到的效果图如下所示。

图文详解CSS中的Grid布局,你真的可以5分钟掌握

页面效果图

结束语

今天这篇文章详情了CSS中Grid布局的基础知识,应该可以很快掌握,其余的复杂点的网格布局大家也可以自己去尝试。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 图文详解CSS中的Grid布局,你真的可以5分钟掌握

发表回复