display:grid动态详解

基础

原始 display:grid display:inline-grid

间隙设置

grid-column-gap:50px grid-row-gap: 50px; grid-gap: 50px 100px;

justify-content容器内对齐方式

justify-content:space-evenly; justify-content:space-between; justify-content:center; justify-content:start; justify-content:end;

align-content容器内垂直对齐方式

align-content:center; align-content:space-evenly; align-content:space-around; align-content:space-between; align-content:start; align-content:end;

1
2
3
4
5
6
7
8
9

父元素的样式

子元素的样式

第一个子元素样式

网格行列

把网格项目放在线1,并在线3结束它
grid-column-start: 1;grid-column-end: 3;
把网格项目放在线1,并在线3结束它
grid-row-start: 1;grid-row-end: 3;
grid-area属性 grid-area属性2 一行4列
grid-template-columns:auto auto auto auto;
设置列的尺寸
grid-template-columns:80px 200px auto 40px;
设置列的高度
grid-template-rows: 80px 200px;
Copyright © 2020-2023 春藤技术,春藤建站 All Rights Reserved
备案号:豫ICP备20020705号 公网安备 51LA统计
0.186572s