Grid布局的一些笔记2021.04.17

首先还是一样用 * {margin: 0 ;padding: 0 ;box-sizing: border-box ;} 重置样式

HTML中给与

<div class="container"></ div>
    <div class="a"></ div>
    <div class="b"></ div>
    <div class="c"></ div>
    <div class="d"></ div>
    <div class="e"></ div>
</ div>

CSS中添加样式

    .container{
        display: grid;
        grid-template-columns: 40px 50px auto 50px 40px;
        /*分成5列*/
        grid-template-rows: 100px 300px 100px ;
        /*分成3行*/
        border: 1px solid green;
    }
    
    .a {
        border: 1px solid black;
    }
    
    .a {
       grid-row-start: 1; /*分成3行即有从上往下数共4条线，此处1是指顶部第一条横线*/
       grid-row-end: 3; /*同上*/
       grid-column-start: 1; /*分成5列即有从左往右数共6条线，此处1是指左侧第一条竖线*/
       grid-column-end: 3; /*同上*/
     }