Grid布局入门，前端校招

grid-template-columns: 200px 1fr 2fr;

grid-gap: 5px;

grid-auto-rows: 50px;

}

/*

minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。

它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

*/

.wrapper-4 {

display: grid;

grid-template-columns: 1fr 1fr minmax(300px, 2fr);

grid-gap: 5px;

grid-auto-rows: 50px;

}

/*

auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。

grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度

*/

.wrapper-5 {

display: grid;

grid-template-columns: 100px auto 100px;

grid-gap: 5px;

grid-auto-rows: 50px;

}

/*

grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性

grid-row-gap 属性、grid-column-gap