@charset "utf-8";

.container{
    display: grid;
    /* grid-template-columns: 200px 200px 200px;    px数で一つのグリッドの横幅を指定 */
    grid-template-columns: 1fr 1fr 1fr;           /* 一列に3つ並べたい場合は３つ数を指定する */

    gap: 10px;                        /* グリッド同士の隙間の幅 */
    grid-template-rows: 200px 100px;  /*  グリッドの高さ。必要な行の数だけ１行ごとに指定する*/

}                                               

.item{
    background: #0bd;
    color: #fff;
    padding: 10px;
    border: red solid 1px;
}

.container2::after{           /*  floatの場合は要素名の後に::afterをつける*/
    content: '';
    display: block;           /*  次に来る要素は縦ならびになる*/
    
    /* clear: both; */          /* 左詰めも右詰も同時に解除*/
    clear: left;               /* clear処理を行わないと、次の要素が重なり横並びになる */
}

.item2{
    background-color: #0bd;
    color: #fff;
    padding: 10px;        /* 指定した要素の枠を広げる  */
    width: 200px;
    margin: 10px;        /*  隣の要素との境界を広げる*/
    float: left;
    border: red solid 1px;
}

.box{
    background-color: #aef;
    width: 400px;
    padding: 2rem;
    margin: 1rem;
    display: flex;
    justify-content: center;
    border: red solid 1px;
}


        /*  */