常用 CSS 笔记

grid 常用属性用法记录

display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
grid-template-rows: 140px 140px;
gap: 10px;
overflow: hidden;
grid-template-areas:
“a b c d e”
“f f g h i”;

图片居中

方法1

div{
    position:relative;
　 width: 100px;
    height: 100px;
    overflow:hidden;
}
 div img{
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    min-width: 100%;
    min-height: 100%;
    transform:translate(-50%,-50%);
}

方法2

div{
　　width: 100px;
　　height: 100px;
 
}
div img{
    width: 100%;
    height: 100%;
    object-fit:cover;
}