CSS Grid布局的使用

CSS Grid布局的使用

介绍之前，先了解一下该门技术的优缺点，看自己是否值得学习，优缺点如下：

优点：CSS Grid布局是一种用于创建网页布局的强大工具。它引入了一个二维网格系统，可以以行和列的形式创建布局，提供了更灵活和精确的控制，并且减少了不必要的一些计算。
缺点：兼容性问题：CSS Grid布局是在CSS3中引入的较新的特性，因此旧版本的浏览器可能不支持它或支持有限。

具体的使用

布局效果如下：（利用grid布局）

上图利用grid栅格系统，从上到下共三个部分，nav main footer
1、nav部分四个button独占一行，先看下nav部分具体的代码，再做介绍：

nav{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

上面代码的意思是生成一行四列的表格，每列平摊空间，每个格子之间的间距为10px，且nav的宽度会根据屏幕的宽度进行自适应。
2、main部分代码如下：

main{
    height: 450px;
    display: grid;
    gap: 20px;
    grid-template-areas: 'banner banner banner banner banner box-r-top'
    'banner banner banner banner banner box-r-bottom';
}

上面是main部分，使用grid布局，其中grid-template-areas将main元素分割为两行六列的栅格，并使用命名空间分别占据main的空间，下面是内部的三个元素使用空间的代码：

main li:first-child{
     grid-area: banner;
     background: url(./banner.jpg);
     background-size: cover;
     background-position: center;
}
main button{
     color: var(--light);
}

上面的grid-area是用来占用空间的，它的值填写grid-template-areas的某个值，比如写banner就会占据main的所有命名空间名称是banner的位置。

文章来源:炸药包一号