Open ytxbnahn opened 6 years ago
.rwd-grid{ display: grid; grid-gap: 10px; grid-template-columns: 100px auto 200px; grid-template-rows:150px 200px 200px 100px; }
1 display：grid布局 2 grid-gap: 10px 各个块之间的距离 3 grid-template-columns: 100px auto 200px; 分割成三列。 4 grid-template-rows:150px 200px 200px 100px; 分割成4行
.rwd-header{ grid-column: 1/4; grid-row: 1; background: rgba(219, 111, 83, 1); }
1 grid-column: 1/4; 从第一列到第四列开始，也就是1到3列 2 grid-row: 1; 第一列
grid学习
父元素代码
.rwd-grid{ display: grid; grid-gap: 10px; grid-template-columns: 100px auto 200px; grid-template-rows:150px 200px 200px 100px; }解析
1 display：grid布局 2 grid-gap: 10px 各个块之间的距离 3 grid-template-columns: 100px auto 200px; 分割成三列。 4 grid-template-rows:150px 200px 200px 100px; 分割成4行
子元素代码
.rwd-header{ grid-column: 1/4; grid-row: 1; background: rgba(219, 111, 83, 1); }解析
1 grid-column: 1/4; 从第一列到第四列开始，也就是1到3列 2 grid-row: 1; 第一列
参考链接