grid

基本使用

display: grid;
grid-template-columns:1fr 1fr; // 几个fr代表一行有几个元素，1代表占比。
column-gap: 24px; // 列间距
row-gap: 24px; // 行间距
gap: 21px; // 行间距列间距统一设置

排列元素

参数为设置的div属性grid-area
grid-template-areas: 
"header header header"; 
"sidebar content content"; 
"footer footer footer";
.header{
    grid-area:header;
}
.sidebar{
    grid-area:sidebar;
}
.content{
    grid-area:content;
}
.footer{
    grid-area:footer;
}

css minmax()

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

其中minmax(150px, 1fr)的含义是每一个列的宽度最小是150像素，最大是1fr，也就是等分宽度。

语法

minmax(min, max)
minmax( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

css repeat()

文章从张鑫旭博客收集