收藏
天蓬老师批改状态：合格
老师批语：
网格容器 :
网格项目：
网格单元：
网格轨道
grid-template-rows 设置轨道的行高
grid-template-columns 设置轨道的列宽、
网格间距
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | grid-template-columns | 设置列的宽 可直接写N个值 可使用repeat() |
| 2 | grid-template-rows | 设置行高 可直接写N个值 可使用repeat() |
| 3 | grid-template-columns:minmax(最小宽度, 最大宽度) | minmax 可以设置最小值和最大值 |
| grid-template-rows:minmax(最小宽度, 最大宽度) | minmax 可以设置最小值和最大值 | |
| 5 | gap | 设置轨道的间距，两个参数 第一个是水平方向的行高 第二高列方向的列宽 |
grid-template-rows：repeat(N行，行高)；
grid-template-columns:repeat(N列，列宽) 最后一列的宽度；
示列 minmax()
/*最小宽和最大宽度*/grid-template-colums:1fr minmax(20em,2fr) 1fr;
示列 repeat()
/*设置三列两行*/grid-template-columns:repeat（2，10em）5em;grid-template-rows：repeat(1,5em) 4em;
示列
/*轨道间距 行间距0.5em,列间距1em*/gap:0.5em 1em;
示列
/*使用fr 中间的始终是两边的两倍*/grid-template-columns:1fr 2fr 1fr;
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>grid</title><style>.container {padding: 1em;margin: 1em;border: 1px solid #000;display: grid;/*设置一个两行三列*/grid-template-columns:10em 10em 10em;grid-template-rows:5em 5em;/*两行三列 可简写为*/grid-template-colums:repeat(3,10em);grid-tempate-rows:repeat(2,5em);/*设置最小宽和最大宽*/grid-template-colums:1fr minmax(20em,2fr) 1fr;/*轨道间距*/gap:0.5em;}.container>.items {border: 1px solid #000;background-color: aqua;padding: 0.5em;}</style></head><body><div class="container"><div class="items">1</div><div class="items">2</div><div class="items">3</div><div class="items">4</div><div class="items">5</div><div class="items">6</div></div></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
