栅格布局一般怎么用_嘿~ 是时候学学栅格布局GRID了布局入门

最新推荐文章于 2024-08-16 17:14:08 发布

weixin_39857211

最新推荐文章于 2024-08-16 17:14:08 发布

阅读量144

点赞数

文章标签：栅格布局一般怎么用

本文链接：https://blog.csdn.net/weixin_39857211/article/details/112999296

版权

概念篇

学完了概念好像没啥用。今天我们来使用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的概念。