资讯专栏INFORMATION COLUMN

CSS--使用CSS Grid(网格)布局

xiongzenghui / 721人阅读

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

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

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

    
1
2
3
4
5
6

要把父元素元素变成一个 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 属性在网格中的网格项之间添加一个间隙。

代码如下:

    
顶部(一个点表示一个空白的格子),所以距离左边和右边各有一个格子的距离。
中间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;
        }

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

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

相关文章

  • 翻译 | CSS网格CSS Grid布局入门

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

    Ashin 评论0 收藏0
  • CSS Grid 布局完全指南(图解 Grid 详细教程)

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

    flybywind 评论0 收藏0
  • CSS Grid布局:什么是网格布局

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

    xiaoqibTn 评论0 收藏0
  • (译)原生CSS网格布局学习笔记

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

    v1 评论0 收藏0
  • (译)原生CSS网格布局学习笔记

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

    Warren 评论0 收藏0
  • CSS Grid布局网格单元格布局

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

    maxmin 评论0 收藏0

发表评论

0条评论

xiongzenghui

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<