CSS--使用CSS Grid（网格）布局

xiongzenghui 发布于2019-08-29 16:16 / 815人阅读

摘要：一网格布局简介布局由两个核心组成部分是父元素和子元素，父元素是实际的网格，子元素是网格内的内容。添加这个属性被称为网格区域，也叫模板区域，能够让我们轻松地进行布局实验。

、一 CSS Grid(网格布局)简介

CSS Grid 布局由两个核心组成部分是父元素和子元素，父元素是实际的 grid(网格)，子元素是 grid(网格) 内的内容。
下面是一个父元素和六个子元素

要把父元素元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid
效果图：

下面进行网格布局：（具体解释在代码中）

        .box {
            width: 350px;
            height: 350px;
            /* background: #ccc; */
            margin: 0 auto;
            grid-gap: 5px;
            display: grid;
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px;
        }

        .item {
            border: 1px solid black;
            box-sizing: border-box;
        }

        .div1 {
            grid-column-start: 1;
            grid-column-end: 3;
            /*(div1从占据从第一条网格线开始，到第三条网格线结束)*/
            line-height: 100px;
            text-align: center;
            background: rgb(252, 0, 0);
            /* grid-column: 1/3;(这是缩写的形式) */
        }

        .div2 {
            line-height: 100px;
            text-align: center;
            background: rgb(252, 134, 0);
        }

        .div3 {
            grid-row-start: 2;
            grid-row-end: 4;
            /* grid-row: 2/4;(这是缩写的形式) */
            line-height: 200px;
            text-align: center;
            background: rgb(21, 207, 108);
        }

        .div4 {
            grid-column-start: 2;
            grid-column-end: 4;
            line-height: 100px;
            text-align: center;
            background: rgb(18, 21, 189);
            /* grid-column: 2/4;(这是缩写的形式) */
        }

        .div5 {
            line-height: 100px;
            text-align: center;
            background: rgb(16, 170, 197);
        }

        .div6 {
            line-height: 100px;
            text-align: center;
            background: rgb(172, 126, 199);
        }

上面代码中的网格线(如图箭头所指的地方就是一根网格线)：

二、响应式网格布局

和上面的差不多（添加了以下的内容）
使用grid-template-columns 属性创建一个 12 列的网格，每个列都是一个单位宽度（总宽度的 1/12 ）
使用 grid-template-rows 属性创建 3 行

使用 grid-gap 属性在网格中的网格项之间添加一个间隙。

代码如下：

    
        顶部（一个点表示一个空白的格子），所以距离左边和右边各有一个格子的距离。
        中间1
        中间2所以可以利用空白的格子来对你所要拍的网页来进行布局
        底部（一个点表示一个空白的格子），所以距离右边有三个格子的距离。

添加 grid-template-areas
这个属性被称为网格区域，也叫模板区域，能够让我们轻松地进行布局实验。
效果图：
][3]
代码如下：（具体描述在代码中）

        .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 50px 350px 50px;
            grid-gap: 5px;
            grid-template-areas: ". h h h h h h h h h h ." " m m c c c c c c c c c c" "f f f f f f f f f . . .";
        }

        .container>div {
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            line-height:50px;
            grid-area: h;
            color:rgb(219, 52, 169);
        }

        .menu {
            grid-area: m;
            text-align: center;
            line-height:350px;
        }

        .content {
            text-align: center;
            line-height:350px;
            grid-area: c;
            color:rgb(25, 158, 69);
        }

        .footer {
            color:rgb(212, 112, 18);
            text-align: center;
            line-height:50px;
            grid-area: f;
        }

GPU云服务器云服务器 css布局 css布局教程学习css布局 css使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113640.html

翻译 | CSS网格（CSS Grid）布局入门

摘要：浏览器兼容性网格布局从开始收到支持，微软在会更新对网格布局的支持。微软的浏览器和有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。原文地址：Getting to know CSS Grid Layout 原文作者：Chris Wright 译者：华翔校对者：珂珂、干干翻译 | CSS网格（CSS Grid）布局入...

Ashin 2019-08-29 13:18 评论0 收藏0
CSS Grid 布局完全指南(图解 Grid 详细教程)

摘要：重复网格区域的名称导致内容跨越这些单元格。中间一排将由两个区域，一个是空单元格，一个区域组成。你可以使用任意数量的相邻的点来声明单个空单元格。只要这些点之间没有空隙隔开，他们就代表一个单独的单元格。 CSS Grid 布局是 CSS 中最强大的布局系统。与 flexbox 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。通过将 CSS 规则应用...

flybywind 2019-04-23 11:50 评论0 收藏0
CSS Grid布局：什么是网格布局

摘要：网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域，其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...

xiaoqibTn 2019-08-28 18:03 评论0 收藏0
(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

v1 2019-08-02 15:56 评论0 收藏0
(译)原生CSS网格布局学习笔记

摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...

Warren 2019-08-30 13:10 评论0 收藏0
CSS Grid布局：网格单元格布局

摘要：基于网格线的占位区网格中的单元格是有网格线划分出来的，那么在网格布局中，同样可以使用网格线来给子元素设置占位区域。也就是说这四条网格线间的区域是一个单元格。 CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局：什么是网格布局》和《[CSS Grid布局：浏览器开启CSS Grid Layout]ht...

maxmin 2019-08-28 18:03 评论0 收藏0