LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

一分钟几个样式示例就可以掌握前端CSS Grid宫格布局

admin
2024年3月30日 0:25 本文热度 589

CSS Grid布局的精髓,从基础知识到高级技巧,深入剖析其无与伦比的设计潜力。无论您是初学者还是资深开发者,这篇文章都将为您呈现一个全新的视角



01


解锁布局的新维度

    接下来,我们将深入探讨CSS Grid的各种布局技巧。通过分析实际案例和最佳实践,您将学会如何利用Grid实现各种复杂布局,包括多列布局、响应式设计和网格对齐等。

// 开启grid布局

.grid-tag {

  display: grid;

}

假设在一个容器中有6个子元素是这样子的,如果你想实现将这些子元素修改成2列的布局方式,应该怎么实现呢


你可以使用以下代码示例

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr; // 你也可以使用 repeat(2,1fr) 第一个参数多少等份

  /*grid-template-columns:200rpx 200rpx; // 使用固定的宽度*/

  /*grid-template-columns: 1fr 1fr 1fr; // 三列布局*/

}

fr单位是grid布局的单位,例如上面的2列布局你想让第一列的占三分之二的宽度,那么你可以这样子做

.grid-tag{

  display: grid;

  grid-template-columns: 2fr 1fr;

}

这样子第一列的是2fr个单位,总共分成3个单位,所以第一列会占据2/3的宽度。


如果你想让元素之间保留间隔的话,例如下示图

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20rpx; // 统一设置行列间距

  /*column-gap: 20rpx; // 列间距,元素的左右间距*/

  /*row-gap: 20rpx; // 行间距,上下元素的间距*/

}

那么接下来如何实现grid的对齐方式呢,其实对齐方式跟flexbox的对齐方式使用方法是一样的

.grid-tag{

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20rpx;

  align-items: center; // 垂直方向对齐方式 center 居中对齐 end 靠下对齐

   justify-items: center; // 水平方向对齐方式 center 居中对齐 end 靠下对齐

 }

02


Grid常用属性一览以及例图欣赏


  • grid-template-columns 和 grid-template-rows: 这两个属性用于定义网格的列和行的大小和数量。您可以指定固定大小、百分比、自适应大小等。
  • grid-column 和 grid-row: 这些属性用于指定一个元素应该跨越的列数或行数。
  • grid-gap: 这个属性用于设置网格行和列之间的间距。可以通过指定单个值来统一设置行列间距,也可以分别指定行间距和列间距。
  • justify-items 和 align-items: 这两个属性用于设置网格容器内所有项目的水平和垂直对齐方式。





03


结束

在本文中,我们了解了CSS Grid布局的精髓,学习了如何利用这一牛叉的布局技术来构建网页布局。CSS Grid提供了灵活的布局选项。

通过理解Grid布局的各种技巧和属性,您也可以轻松实现各种复杂的布局设计,从而提高更优秀的用户体验。无论是构建响应式网站、应用程序界面还是任何其他类型的布局,Grid都能帮我们得心应手。

该文章在 2024/3/30 0:25:42 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved