Grid布局学习
程序员文章站
2022-04-05 13:05:35
...
基本属性
- 第一个属性就是给display定义 display: grid;
.container{
display: grid;
}
- 列分布设置 grid-template-columns:,可以自适应也可以固定大小
.container{
display: grid;
grid-template-columns: repeat(3,1fr); /*自适应平均分布三列*/
grid-template-columns: 100px 50px 100px;
}
- 横分布设置 grid-template-rows:,同理可以自适应也可以固定大小
.container{
width: 300px;
height: 300px;
border: 1px solid #000000;
display: grid;
grid-template-columns: 100px 50px 100px;
grid-template-columns: repeat(3,1fr); /*自适应平均分布三列*/
grid-template-rows: 100px 50px 150px;
grid-template-rows: repeat(3,1fr); /*自适应平均分布三行*/
}
- 单元格之间的间隙 gap:,
.container{
width: 300px;
height: 300px;
border: 1px solid #000000;
display: grid;
grid-template-columns: 100px 50px 100px;
grid-template-columns: repeat(3,1fr); /*自适应平均分布三列*/
grid-template-rows: 100px 50px 150px;
grid-template-rows: repeat(3,1fr); /*自适应平均分布三横*/
gap: 5px;
}
- 矩形区域,默认是跨一行或跨一列(网格区域)
.container > .item{
background-color: lightgreen;
/* grid: 容器-》单元格-》项目 */
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
grid-row-end: 3;
grid-row-end: span 2;
/* 简化 */
/* grid-column:起始列号/结束列号;
grid-row:起始行号/结束行号; */
grid-column: 1/3;
grid-row: 1/3;
}
实战小案例
.container{
width: 1000px;
/* height: 600px; */
/* border: 1px solid #000000; */
display: grid;
grid-template-columns: repeat(5,1fr);
grid-template-rows: repeat(3,1fr);
gap: 10px;
}
.container > .item:first-of-type{
grid-row-end: span 2;
/* background-color: lightgreen; */
background-image: url('https://www.php.cn/static/images/index_learn_first.jpg');
background-size: 100% 100%;
box-shadow: 2px 2px 8px #ccc;
border-radius: 8px;
overflow: hidden;
}
.itemTop{
height: 100px;
background-color: #cccccc;
background-image: url('https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png');
background-size: 100% 100%;
}
.container > .item:not(:first-of-type){
box-shadow: 2px 2px 8px #ccc;
border-radius: 8px;
overflow: hidden;
}
.itemBottom{
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.bottomTx1{
display: flex;
font-size: 12px;
}
.bottomTx2{
font-size: 12px;
color: #cccccc;
margin-top: 5px;
}
.txBg{
background: #cccccc;
color: #ffffff;
margin-right: 10px;
padding: 0 2px;
}
<div class="container">
<div class="item"></div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
<div class="item">
<div class="itemTop"></div>
<div class="itemBottom">
<div class="bottomTx1">
<div class="txBg">初级</div>
<div>编辑学习方法分享直播</div>
</div>
<div class="bottomTx2">18w+次播放</div>
</div>
</div>
</div>
上一篇: python数据类型是什么
下一篇: html文件是纯文本文件吗