CSS-grid布局

这篇具有很好参考价值的文章主要介绍了CSS-grid布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  • 网格布局也叫grid布局,平常写样式的时候基本上都是用的flex布局。
    像以下布局,用flex布局就可能会有有点麻烦,这时候用grid布局就方便的多了。

CSS-grid布局,css,前端
CSS-grid布局,css,前端

或者是照片墙

grid布局就是将容器划分为行和列,产生单元格,然后在指定的单元格,可以看作是二维布局,我们一直经常用的flex布局也就可以看作一维布局。
介绍
gird布局很强大,采用网格布局的区域,称为容器。容器内部子元素,称为项目,即container->item。
容器属性
Gird布局的属性分为两类。一类定义在容器上面,称为容器属性,另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
display属性
display: grid指定一个容器采用网格布局。
1.grid的属性

  1. grid-template-columns:定义每一行列的列宽。
  2. grid-template-rows:定义每一行的行高。
    还有一种重复某种不固定大小模式:
    grid-template-columns:repeat(2,100px 80px);
    代表重复2次100px 80px的模式,也就是4列,等同于:
    grid-template-columns:100px 80px 100px 80px;
    下面举个例子:
    HTM:
1
2
3
4
5
6
7
8
9
css: .father { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-template-columns: repeat(2, 100px 80px); } 效果:CSS-grid布局,css,前端

上面写了9个元素,分别给了不同的颜色,根据 grid-template-columns和grid-template-rows或者grid-template-columns来设置他们的大小,这里的特殊就是,如果不给里面各个单元格大小,那么设置的列宽和行高就会去设置成每个单元格的大小,如果给了大小,那么设置的就是每个单元格之前的间距了。
2.关键字
1.auto-fill;如果容易大小不固定,项目大小固定,可以用auto-fill关键字填充;
自动填充: repeat(auto-fill, 30px)
CSS-grid布局,css,前端

也就是设置每个单元格的大小都一样,然后并列排放。
2.fr(fraction):如果两列的宽分别是1fr和2fr,就表示后者是前者的两杯。
例子:
grid-template-columns: 1fr 2fr 4fr 1fr 1fr;
CSS-grid布局,css,前端

这里设置后会发现如果设置的列多了,那后者的倍数都是基于第一位叠加的。
3.minmax();长度范围
grid-template-columns: 1fr 5fr minmax(100px, 1fr);
CSS-grid布局,css,前端

第一列是1fr,第二列是5fr,第三列最小值是100px,最大是1fr。当第二列fr无限大时和的第三列到100px时,会往第一列截止。这里指的无限大也就是没有父级设置大小。
4.auto;自适应
grid-template-columns: 100px auto 100px;
CSS-grid布局,css,前端

自适应也就是自动填充完剩余的空间(不设置最大值最小值的情况下)
5.网格名称
网格闲名称,同一根线可以有多个名称:
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
指定每一根网格线的名字,方便以后的引用。也可以有多个名字;[c1,c1a]
6.区域
grid-template-areas:网格布局允许置顶区域(area),一个区域由单元格或多个单元格组成。grid-template-areas属性用于定义区域。
grid-template-areas: ‘a b c’ ‘d e f’ ‘g h i’;
div:nth-child(1) {
grid-area: a;
}
CSS-grid布局,css,前端

可以实现类似于这样一个单元格占多个位置的情况。
7.放置顺序
grid-auto-flow:划分网格后,容器的子元素也会按照顺序,自动放置在每一个网格中。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行;也可设置为column变成先填满第一列再填第二列;
grid-auto-flow:column
CSS-grid布局,css,前端

8.单元格水平位置与垂直位置
justify-items:属性设置单元格内容的水平位置(左中右);
align-items:属性设置单元格内容的垂直位置(上中下);

  • start:对齐单元格的起始边缘。
  • end:对齐单元格的结束边缘。
  • center:单元格内部居中。
  • stretch:拉伸,占满单元格的整个宽度(默认值)。
    justify-items:
    align-items:
    CSS-grid布局,css,前端

9.整体内容的位置
justify-content:整个内容区域在容器里面的水平位置(左中右);
align-content:整个内容区域的垂直位置(上中下)。
justify-content
align-content
CSS-grid布局,css,前端

总结
Flex布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局,Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局,Grid布局远比 Flex布局强大。(不过存在兼容性问题,使用之前应看具体需求)
兼容性

https://caniuse.com/?search=grid文章来源地址https://www.toymoban.com/news/detail-646905.html

到了这里,关于CSS-grid布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css3 grid 布局

    特别声明:这篇博客转载于阮一峰老师,转载是为了方便日后复习,实在写的太棒了。 目录 一、概述 二、基本概念 2.1 容器和项目 2.2 行和列 2.3 单元格 2.4 网格线 三、容器属性 3.1 display 属性 3.2grid-template-columns 属性,grid-template-rows 属性 3.3grid-row-gap 属性,grid-column-gap 属性,

    2024年02月10日
    浏览(69)
  • css3 Grid布局

    Grid布局是一种强大的CSS布局系统,它可以帮助我们创建灵活的网格结构,使网页布局更易于管理和响应式。 Grid布局由网格容器(Grid Container)和网格项(Grid Item)组成。网格容器是包含网格项的父元素,而网格项则是直接放置在网格容器中的子元素。 在上述示例中,我们创

    2024年02月09日
    浏览(76)
  • css中的grid高频布局

    1.一个父级容器内有n个子元素; 2.每个子元素最小宽度是100px; 3.每个子元素最大宽度根据屏幕宽度自适应; 4.每个子元素的宽度保持同宽; 5.每个元素之间有间隔,每一行的两边不留间隙,每一列的上下不留间隙; 6.每个子元素中的文本超出之后省略显示; css排版常见布局

    2024年02月04日
    浏览(50)
  • css3-grid:grid 布局 / 基础使用

    一、理解 grid   二、理解 css grid 布局 CSS Grid布局是一个二维的布局系统,它允许我们通过定义网格和网格中每个元素的位置和尺寸来进行页面布局。CSS Grid是一个非常强大的布局系统,它不仅可以用于构建网格布局,还可以用于定位元素,并且可以很好地处理复杂的布局。

    2024年02月12日
    浏览(35)
  • 【CSS Grid网格布局】常用属性,示例代码解读

    grid-template-columns/grid-template-rows:用于定义网格的列和行的大小和数量。可以指定具体的尺寸值(如px、em等),也可以使用fr单位表示剩余空间的比例分配。 grid-column-gap/grid-row-gap:用于定义网格的列间距和行间距。可以使用具体的尺寸值或百分比。 grid-template-areas:用于定义

    2024年02月12日
    浏览(39)
  • 圣杯布局/双飞翼布局/flex/grid等,实现CSS三栏自适应布局的几种方法

    三栏布局是网页设计中常用的布局,即网页中的内容被分为三块:左侧/中间/右侧。其中两侧部分宽度固定,中间部分宽度自适应的根据容器(浏览器)宽度撑满剩余空间。而三栏布局也有很多变形,比如两栏或者N栏布局,上中下三栏布局,嵌套混合布局等等。掌握了三栏布

    2024年02月05日
    浏览(40)
  • css:九宫格布局的五种方法(grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性)

    要实现的九宫格效果图如下: 公共样式: 1.grid网格布局 grid-template-columns 用于定义每一列的宽度; grid-template-rows 用于定义每一行的高度;grid-gap设置网格的行间距、列间距 2.flex布局 计算好每个li的宽度和高度,总的宽、高度为300px,那么每个li的宽高就为300px/3=100px 但是由于

    2024年02月11日
    浏览(45)
  • 【前端|CSS系列第4篇】CSS布局之网格布局

    最近在做的一个项目前台首页有一个展示词条的功能,每一个词条都以一个固定大小的词条卡片进行展示,要将所有的词条卡片展示出来,大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化,并且希望整个卡片区域周围不要有太大的留白,可是由于本人css学的并

    2024年02月16日
    浏览(33)
  • 前端知识——css 之 flex 布局

    🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决: 比如在父内容里面垂直居

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包