容器属性
-
grid-template-columns 列
-
grid-template-rows 行
-
row-gap 行间距
-
grid-auto-flow 排列方向 默认row行
-
排列排版 justify-content 水平 align-content垂直
-
设置多余的设置大小 grid-auto
-
容器属性 一个区域由单个或多个组成grid-template-areas
列grid-template-columns
-
grid-template-columns: 100px 100px; 左右均100px
-
grid-template-columns: 1fr 1fr ; 左右均等分 等于 grid-template-columns: repeat(2, 1fr)
-
grid-template-columns: 1fr minmax(150px, 1fr) 第二个最小宽度设置150px
-
grid-template-columns: 100px auto 100px; auto 自动获取剩下的 左右均100
-
网格线 grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];
行grid-template-rows
-
grid-template-rows: 100px 100px 100px 100px; 不设置默认均分铺满
间距 row-gap
-
row-gap: 20px; 行与列均20px
-
合并 两个属性行 ,列 。 一个都一样 gap: 20px 40px;
grid-auto-flow 排序顺序方向
-
grid-auto-flow: row; 默认横线排列
-
grid-auto-flow: column; 竖向排列
-
grid-auto-flow: row dense; 空间利用
排列排版 justify-content 水平 align-content垂直
-
start 最左
-
end 最右
-
center 中间
-
stretch 拉伸
-
space-around 向内分布
-
space-between 向外分布
-
space-evenly 均匀排列每个元素, 每个元素之间的间隔相等
设置多余的设置大小 grid-auto
-
grid-auto-rows: 50px;
-
grid-auto-columns: 50px;
容器属性 一个区域由单个或多个组成grid-template-areas
grid-template-areas: 'a b c' 'd e f' 'g h i';
项目属性
-
从哪里开始到哪列结束 行 grid-row 列grid-column
-
区域 grid-area
-
设置自身对齐 justify-self 行 列 align-self
从哪里开始到哪列结束 行 grid-row 列grid-column
/* grid-column-start: 1; grid-column-end: 3; */ /* 简写 */ /* grid-column: 1/3; */ /* 跨越 */ /* grid-column-start: span 2; */ /* 横线 */ /* grid-row-start: 1; grid-row-end: 3; */
区域 grid-area
grid-area: a; 对应grid-template-areas
设置自身对齐 justify-self 行 列 align-self
/* justify-self: start | end|center|stretch; */ /* 竖向 */ /* align-self: start | end|center|stretch; */ /* 简写 place-self; */
<body>
<div class="main">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<!-- <div class="item item-10">10</div> -->
</div>
</body>
.main {
width: 600px;
height: 600px;
border: 10px solid black;
/* 容器属性 */
display: grid;
/* 不设置默认铺满,每列独占一行 */
/* grid-template-columns: 100px 100px; */
/* 平均等分 等于 grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns: repeat(3, 1fr); */
/* 第二个最小宽度设置150px */
/* grid-template-columns: 1fr minmax(150px, 1fr); */
/* auto 自动获取剩下的 */
grid-template-columns: 100px auto 100px;
/* 网格线 */
grid-template-columns: [c1] 100px [c2] 100px [c3]100px [c4];
/* 不设置默认均分铺满 */
/* grid-template-rows: 100px 100px 100px 100px; */
/* 行间距 */
/* row-gap: 20px; */
/* 列间距 */
/* column-gap: 20px; */
/* 合并 两个属性行 ,列 一个则都一样*/
/* gap: 20px 40px; */
/* 默认横线排列 */
/* grid-auto-flow: row; */
/* 竖向排列 */
/* grid-auto-flow: column; */
/* 空间利用 */
/* grid-auto-flow: row dense; */
/* 水平方向 justify-content
垂直方向 align-content
start 最左
end 最右
center 中间
stretch 拉伸
space-around 向内分布
space-between 向外分布
space-evenly 均匀排列每个元素,
每个元素之间的间隔相等
*/
/* justify-content: space-evenly; */
/* 设置多余的设置大小 */
grid-auto-rows: 50px;
grid-auto-columns: 50px;
/* 容器属性 一个区域由单个或多个组成 */
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.item {
font-size: 50px;
background: yellowgreen;
color: #fff;
}
.item-1 {
/* 从哪里开始到哪列结束 */
background: #e91e6e;
/* 竖向 */
/* grid-column-start: 1;
grid-column-end: 3; */
/* 简写 */
/* grid-column: 1/3; */
/* 跨越 */
/* grid-column-start: span 2; */
/* 横线 */
/* grid-row-start: 1;
grid-row-end: 3; */
}
.item-2 {
background: #5df58b;
/* 区域 */
grid-area: a;
/* 设置自身对齐 */
/* justify-self: start | end|center|stretch; */
/* 竖向 */
/* align-self: start | end|center|stretch; */
/* 简写 place-self; */
}
.item-3 {
background: #5d1350;
}
.item-4 {
background: #5d1906;
}
.item-5 {
background: #5df3de;
}
.item-6 {
background: #5d4766;
}
.item-7 {
background: #5d2dd1;
}
.item-8 {
background: #94b784;
}
.item-9 {
background: #ff370a;
}
.item10 {
background: #ffa225;
}
代码