网格轨道对齐可以相对于网格容器行和列轴。

align-content指定网格轨道沿着行轴对齐方式;justify-content指定网格轨道沿着列轴对齐方式。它们支持下面属性:

  • normal
  • start
  • end
  • center
  • stretch
  • space-around
  • space-between
  • space-evenly
  • baseline
  • first baseline
  • last baseline

 

1. justify-content;

<view class="grid">
<view class='item'>1</view>
<view class='item'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
<view class='item'>5</view>
<view class='item'>6</view>
<view class='item'>7</view>
<view class='item'>8</view>
</view>
page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
width: 100%;
height: 300px;
grid-template-columns: repeat(4, 45px);
grid-template-rows: repeat(4, 45px);
grid-gap: 0.5em;
border: 1px solid #eee;
} .grid {
 //更改这里即可
justify-content: start;
} .item {
text-align: center;
background-color: #1aa034;
line-height: 2.5rem;
}

 


justify-content: start;

start指定列沿着行轴开始排列,它是justify-content默认值.
 


justify-content: end;
列沿着行末端开始排列。
 

justify-content: center;
列沿着行中间排列.


justify-content: space-around;

网格容器剩余列空间分配给每列的两端(相邻两列之间的间距是第一列与容器最左侧边缘或最后一列与容器最右侧边缘间距的两倍)。


justify-content: space-between;
网格容器剩余列空间平均分配给相邻的两列(第一列与容器最左侧边缘和最后一列与容器最右侧边缘没有任何间距)。
 

justify-content: space-evenly;
网格容器剩余列空间平均分配给列之间,相邻两列之间的间距与第一列和容器最左侧边级和最后一列与容器最右侧边缘间距相同.

 2.align-content

page {
color: #fff;
font-size: 16px;
} .grid {
/* padding: 1%; */
display: grid;
width: 100%;
height: 300px;
grid-template-columns: repeat(4, 45px);
grid-template-rows: repeat(4, 45px);
grid-gap: 0.5em;
border: 1px solid #eee;
} .grid {
align-content: start;
} .item {
text-align: center;
background-color: #1aa034;
line-height: 2.5rem;
}

  

align-content: start;

 start允许网格网从网格容器列轴的开始位置排列,其是align-content的默认值.

align-content: end;

  网格行在网格容器列轴末端。

align-content:center;

  网格行在网格列中间。

align-content:space-around;

  网格剩余行空间分配给每行之间上下,其中相邻两行的间距是第一行距离网格容器行顶端或者最后一行距离网格容器行末端之间间距的两倍.

  align-content:space-between;

  网格剩余行空间平均分配给相邻两行之间,其中第一行紧靠网格容器行的顶端,最后一行紧靠网格容器行的末端著作权归作者所有

 align-content:space-evenly;

网格剩余行空间平均分配给行之间,其中相邻两行的间距与第一行距容器行顶端间距和最后一行距容器末端的间距相等.

看到这里再推荐实例演示,来自CSDN:https://blog.csdn.net/qq_41701956/article/details/80176008 ,本章节所有内容均来自https://learncssgrid.com/,由https://www.w3cplus.com译.

grid - 网格轨道对齐方式的更多相关文章

  1. grid - 网格项目对齐方式(Box Alignment)

    CSS的Box Alignment Module补充了网格项目沿着网格行或列轴对齐方式. <view class="grid"> <view class='ite ...

  2. grid - 网格轨道最小和最大尺寸

    可以通过minmax()函数来创建网格轨道的最小或最大尺寸. minmax()函数接受两个参数: 第一个参数定义网格轨道的最小值 第二个参数定义网格轨道的最大值 可以接受任何长度值,也接受auto值. ...

  3. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  4. grid - 重复网格轨道

    使用repeat()可以创建重复的网格轨道.这个适用于创建相等尺寸的网格项目和多个网格项目 <view class="grid"> <view class='gr ...

  5. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  6. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  7. 从 NavMesh 网格寻路回归到 Grid 网格寻路。

    上一个项目的寻路方案是客户端和服务器都采用了 NavMesh 作为解决方案,当时的那几篇文章(一,二,三)是很多网友留言和后台发消息询问最多的,看来这个方案有着广泛的需求.但因为是商业项目,我无法贴出 ...

  8. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  9. Android BottomSheet:List列表或Grid网格展示(3)

     Android BottomSheet:List列表或Grid网格展示(3) BottomSheet可以显示多种样式的底部弹出面板风格,比如常见的List列表样式或者Grid网格样式,以一个例子 ...

随机推荐

  1. IDEA创建javaSE项目

  2. HDU 3416 Marriage Match IV 【最短路】(记录路径)+【最大流】

    <题目链接> 题目大意: 给你一张图,问你其中没有边重合的最短路径有多少条. 解题分析: 建图的时候记得存一下链式后向边,方便寻找最短路径,然后用Dijkstra或者SPFA跑一遍最短路, ...

  3. [ 高危 ] mt SQL注入

    RANK  28 金币    28 不是很核心的系统,但是这个检测方法挺新鲜的 数据包 POST /XXXpital HTTP/1.1Content-Length: 96Content-Type: a ...

  4. spring之基础知识总结

    spring是轻量级的(非侵入式,不用继承spring中的父类等).Spring框架主要提供了IoC容器.AOP.数据访问.Web开发.消息.测试等相关技术.本文主要介绍Spring中的一些小知识点, ...

  5. Newtonsoft.Json日期转换

    在使用EasyUI做后台时,使用表格datagrid,用Newtonsoft.Json转换为Json格式后,时间显示为2013-06-15 T00:00:00形式. 后来研究了一下Newtonsoft ...

  6. Windows 7 下如何配置 java 环境变量

    安装 JDK.从Oracel官方网站上下载,下载完成后安装. http://www.oracle.com/technetwork/java/javase/downloads/jdk8-download ...

  7. ISP PIPLINE(零) 知识综述预热

    本文为camera isp pipline概述 ISP,即image signal processing.为图像成型做的处理工作.适应不同光学环境下图像的还原. pipline流程如下: 光通过LEN ...

  8. LeetCode(12. 整数转罗马数字)

    问题描述 罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 写做 II , ...

  9. C#7.0&6.0新特性 — 完整版

    C#2.0 泛型 部分类型 匿名方法 迭代器 可空类型 Getter / setter单独可访问性 方法组转换(代表) Co- and Contra-variance for delegates 静态 ...

  10. Eclipse 设置Web测试的浏览器

    Window->Preferences->General->Web Browser->选择Use external web browser->选择Default syst ...