CSS Grid布局(2)

最新推荐文章于 2024-04-25 22:37:35 发布
最新推荐文章于 2024-04-25 22:37:35 发布
阅读量1.1k 收藏
点赞数
分类专栏： css布局-Grid 文章标签： css 布局

6.间距

grid-column-gap和grid-row-gap属性用来创建列与列，行与行之间的间距

这里写图片描述

间距(Gap)可以设置任何非负值，长度值可以是px、%、em等单位值

这里写图片描述

grid-gap是grid-row-gap和grid-column-gap两个属性的缩写

如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值

这里写图片描述

如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值都相同

7.通过网格线号码来定位网格项目

网格线实际上是代表线的开始、结束，两条线之间就是网格列或行

每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1

这里写图片描述

两列三行的网格创建三条列网格线和四条行网格线。item1就是由行和列的号码重新定位

如果一个网格项目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的

这里写图片描述

这里写图片描述

grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写

如果只提供一个值，他指定了grid-row-start和grid-column-start的值

如果提供两个值，第一个值是grid-row-start、grid-column-start的值，第二个值是grid-row-end、grid-column-end的值，两者之间必须要用/隔开

这里写图片描述

这里写图片描述

如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end和第四个值对应grid-column-end

这里写图片描述

8.网格项目跨行或跨列

默认情况下网格项目跨度只有一个列和行，但可以跨越多个行和列

这里写图片描述

可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越

这里写图片描述

这里写图片描述

同样的可以通过grid-row-end和grid-row-start距离多个网格号实现多个行跨越

这里写图片描述

这里写图片描述

通过简写的grid-row和grid-column也能实现多行或多列的跨越

这里写图片描述

这里写图片描述

关键词span后面紧随数字，表示合并多少个列或行

这里写图片描述

tian361zyc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS Grid布局
02-01
关于前端页面布局的开发大会ppt，讲解了CSS layout中的Grid
两列三列布局
weixin_45393020的博客
03-30 396
两栏右侧自适应布局(自适应部分是首节点) 这里的两栏自适应布局指的是左边固定，右边自适应，并且自适应部分的标签应写在固定部分标签的前面，一共有2种方法实现这种布局。 flex布局 通过设置flex弹性布局的方式实现两栏右侧布局（设置项目的排列方向从右向左） .container{ display: flex; flex-direction: row-reverse; } .left{ width: 300px; height: 100vh;
最强大的 CSS 布局 —— Grid 布局
油墨香^-^的博客
03-30 904
Grid布局相关的属性以及值众多，需要记忆的不少，建议可以跟demo一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小demo演示，建议大家可以自己修改看看效果加深记忆Grid布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性演示地址可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置grid-column-start 属性：左边框所在的垂直网格线grid-column-end 属性：右边框所在的垂直网格线。
grid布局所有元素在同一行显示且等分列
qq_45327886的博客
03-07 502
grid布局所有元素在同一行显示且等分列
CSS进阶之grid网格布局 (三)：关于grid布局、grid-container属性、grid-items属性
Good Good Study,Day Day Up!
06-04 2463
css网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是 HTML 生成了这些区域）。像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。1. 将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局；2. Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
css双列布局-grid
HAINIHAOya的博客
03-26 1806
css双列布局-grid 使用Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。  现在给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。此时可以看到整个容器的高度因为首列的内容被撑开了，并且右边
布局“grid”详解介绍大全
weixin_42373116的博客
05-26 4241
前言 说起布局grid我相信重要程度比起flex不遑多让啊。除了兼容性方面，其余的方面都是很完美的。但是我相信随着技术的不断更替，兼容性已经不再是问题。那今天进让我们来看看grid到底能够干啥吧 本文意图不是想将API介绍清楚，如果想了解详细API，请移步阮一峰老师Grid布局。 本文从实际的布局业务出发。告诉各位读者什么样的情况下，适合哪种API 开始 1. 如果实现多行多列网格布局呢？？？ .container { display: grid; gr
Grid布局详解-看这篇就够了
qq_46372132的博客
08-29 1196
Grid布局详解-看这篇就够了,比flex布局更强大的grid网格布局
Grid布局
weixin_50945128的博客
01-24 781
Grid布局
阮一峰老师 CSS Grid 网格布局教程(转载)
热门推荐
鸭绒的博客
09-30 2万+
特别声明：这篇博客转载于阮一峰老师，转载是为了方便日后复习，实在写的太棒了。 <!-- div class="asset-body" --> <h2>一、概述</h2> 网格布局（Grid）是最强大的 CSS 布局方案。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的.
图解CSS布局（一）- Grid布局
小丞同学
05-10 7313
Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局
布局------grid（二维网格）布局篇
COCOLI_BK的博客
12-13 1132
CSS Grid 网格布局 一、概述 1. 网格布局（Grid）是将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局 2. Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。 3. Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。 二、基本概念 2.1 容器和项目 采...
5分钟教你学会 CSS Grid 布局
09-27
主要介绍了5分钟教你学会 CSS Grid 布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS Grid 网格布局全解析
09-24
主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）...
前端开发攻略---合并表格单元格，表格内嵌套表格实现手风琴效果。
nibabaoo的博客
04-18 533
合并表格单元格，表格内嵌套表格实现手风琴效果。
前端CSS基础6（CSS列表与表格的相关属性，边框的样式调整）
qq_51752841的博客
04-22 827
CSS列表与表格的相关属性，边框的样式调整
CSS中的 5 类常见伪元素详解！
最新发布
u013179804的博客
04-25 767
CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover:focus等。伪元素在 CSS 中使用两个冒号（ok，那我们一起来看看吧。
CSS Grid 布局
08-30
要开始使用CSS Grid布局，首先需要为容器元素应用`display: grid`样式。然后，可以使用`grid-template-columns`和`grid-template-rows`属性来定义网格的列数和行数，可以是像素，百分比或者是自动适应内容的大小。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值