嘿~ 是时候学学栅格布局GRID了布局入门

firim 发布于2019-08-29 13:58 / 521人阅读

摘要：有开始肯定就有结束，，是用来控制区域结束位置。还有的值都可以取负数的，负数意味着从后往前数。等价于表示横跨几个单元格。也一样的是和的简写。

概念篇
学完了概念好像没啥用。今天我们来使用Grid完成两个简单布局。

声明容器

display: grid;或display: inline-grid;或display: subgrid;。grid 和 inline-grid 很好理解就是块级网格及行内块级网格。subgrid 是用来定义子网格，子网格会继承父网格的一系列规格。

划分容器

定义横、纵网格轨道。此处我们尝试定义一个4 * 4的网格。code

.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*大家不要被下面的代码迷惑，只是为了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}

grid-template-columns

grid-template-columns用来定义网格列的宽度既轨道宽度，代码表示将容器划分为4列，列的宽度都为60px，宽度可以随意的更改。

grid-template-rows

grid-template-rows用来定义网格行的高度，代码表示将容器划分4个行。通过以上两行代码就实现了4 * 4的网格划分了。不信，增加几个div数试一下。

grid-gap用来控制网格的间距的，准确地说是用来控制网格区域的间距。

控制项目

到目前为止，我们的 css 好像都作用在了容器上，那么如何来点儿高级的东西呢？code

.grid {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px;
    grid-template-rows: 60px 60px 60px 60px;
    grid-gap: 5px;
}
.grid > div {
    background: grey;
    /*大家不要被下面的代码迷惑，只是为了好看，哈哈*/
    display: flex;
    color: #fff;
    font-size: 150%;
    justify-content: center;
    align-items: center;
}
.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}
.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
.item4 {
    grid-column: 1 / span 2;
    grid-row: -1 / -3;
}
.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
.item6 {
    grid-area: -1 / 5 / -3 / 4;
}

我们在概念篇中讨论过，网格线是有编号的1、2、3、4...。要控制网格区域的位置就需要依赖于这这些网格线。下面通过5个例子讲解如何通过控制网格线来实现区域的定位及单元格合并。

grid-column-start & grid-row-start

grid-column-start grid-row-start用来控制区域的列开始和行开始的位置，请注意这里我们并没有给出 grid-column-end和grid-row-end的值，他们的默认值可以简单理解为 start 的值加一。其实这里有个span的概念。

.item1 {
    grid-column-start: 4;
    grid-row-start: 2;
}

grid-column-end& grid-row-end

有开始肯定就有结束，grid-column-end，grid-row-end是用来控制区域结束位置。这里有个知识点需要大家记住，✍️end 的值是可以小余 start 的值的，不信你试试。还有grid-column-start、grid-column-end、grid-row-start、grid-row-end 的值都可以取负数的，负数意味着从后往前数✍️。

.item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}

grid-column & grid-row

grid 的相关属性这么多，肯定会有简写。grid-column是grid-column-start 和grid-column-end的简写。grid-row同理。

.item3 {
    grid-column: -1 / -2;
    grid-row: 1 / 2;
}
// 等价于
.item3 {
    grid-column-start: -1;
    grid-column-end: -2;
    grid-row-start: 1;
    grid-row-end: 2;
}

span

span表示横跨几个单元格。功能就是当你你不愿意一直数数时，就可以使用span。下面向大家展示区域定义的4种写法。

.item4 {
    /* 1 */
    grid-column: 1 / span 2;

    /* 2 */
    grid-column: span 2 / 3;

    /* 3 */
    grid-column-start: 1;
    grid-column-end: span 2;

    /* 4 */
    grid-column-start: span 2;
    grid-column-end: 3;
    /*row 也一样的*/
    grid-row: -1 / -3;
}

grid-area

grid-area是grid-row和grid-column的简写。顺序是grid-row-start，grid-column-start，grid-row-end，grid-column-end。

.item5 {
    grid-area: -1 / 3 / -3 / 4;
}
// 等同于
.item {
    grid-row-start: -1;
    grid-row-end: -3;
    grid-column-start: 3;
    grid-column-end: 4;
}

此处留一个思考题：grid-area 里面可以使用 span 吗？?

总结

本文希望大家可以掌握定义容器和轨道的方法和划分网格区域的n种写法。

推荐大家到cssgridgarden上练习一下，加深对 grid属性的记忆。grid概念理解完之后就是考验大家的记忆功力了。

姊妹篇深入理解布局神器 flexbox

欢迎大家指正批评、或留言。QQ群：538631558

云服务器 GPU云服务器布局入门 div布局布局html 排版布局拖动布局

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

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

嘿~ 是时候学学栅格布局GRID了概念篇

摘要：网格线网格线有横线和纵线，纵横交错的线就将网格容器切割成了最小的单元单元格。单元格图中绿色背景的块就是单元格，网格布局的最小计量单位，该容器一共有个单元格。下一篇 grid 布局入门 Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。最初的table布局不知道是神马鬼，再到 float 满天飞，可能还要使用abosulte来实现页面的布局...

source 2019-08-29 13:57 评论0 收藏0
前端入门24-响应式布局（BootStrap）

摘要：声明声明本篇内容摘抄自以下两个来源中文网感谢大佬们的分享。版本是全球最受欢迎的前端组件库，用于开发响应式布局移动设备优先的项目。官方示例官方示例版本，官方还没有中文教程，的中文教程倒是很齐全了。声明本篇内容摘抄自以下两个来源： BootStrap中文网感谢大佬们的分享。正文-响应式布局（BootStrap）这次想来讲讲一个前端开发框架：BootStrap BootStrap 目前...

lunaticf 2019-04-23 13:06 评论0 收藏0
[译] Grid 布局完全指南

摘要：如果你定义的内容包含重复部分，你可以使用标记去组织它。另外，也有一个比较复杂但是方便的语法指定三个属性，示例如下与以下代码是等价的因为无法隐式重置属性，与。简介 CSS 栅格布局 (亦称 Grid)，是一个基于栅格的二维布局系统，旨在彻底改变基于网格用户界面的设计。CSS 一直以来并没有把布局做的足够好。刚开始，我们使用 tables，后来是 floats，positioning 和...

Baoyuan 2019-08-30 15:52 评论0 收藏0
你不需要基于 CSS Grid 的栅格布局系统

摘要：在过去的几个星期里，我开始看到基于的布局框架和栅格系统的出现。你可能倾向于明确给出所有元素的位置，或是尽可能依赖于自动布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在过去的几个星期里，我开始看到基于 CSS Grid 的布局框架和栅格系统的出现。我们惊讶它为什么出现的这么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 评论0 收藏0