クローンコード-mdn grid

11月21日
gridを用いて学習中のmdnサイトを組織した.
mdnクローン符号化
先週までflexで書かれたコードを使って
改編が行われた.
まず、グリッドとFlexの用途の違いを見てみましょう.
grid:既存のフレームワークにあまり変更がない場合は、コンテンツの追加や削除が少ない場合に使用します.
flex:固定フレームワークでコンテンツを変更または追加するために使用します.
これらの違いから見ると、
mdnはgridにもっと適したサイトです.
もちろん、既存のサイトもグリッドです.
最初はgridが見慣れていなかったのでflexでしたが、試してみるとgridの方がきれいな感じ?!
まず元の書類を見てみましょう.
大きなフレームワークはdisplay:blockで、
flexで調整しました.

cont-menu {
    display: flex;
    margin: 35px 100px 25px 40px;
}

.cont-menu .mdn-logo {
    width: 210px;
    margin-right: 60px;
}

.cont-menu .nav-menu {
    display: flex;
    font-size: 100%;
    text-decoration: none;
}

Flex実装
flexはcssを行いながら変更を続行し、部分に入れることができます.
使いやすいです.細部を移動する際に使う良い機能です.
今週、gridに修正された「フォーチュン」は最初の22のcolumnから...
最小限の基準で分けて行うだけでこんな大事が起こったのです
幸いなことに、学習グループからAutoに分け、3-4に分けるともっと簡単なアドバイスが聞けます!👍

body {
    display: grid;
    font-family: arial, x-locale-body, sans-serif;
    grid-template-columns: repeat(5, auto);
    grid-template-rows: repeat(3,auto)
}
.header {
    grid-row: 1/2;
    grid-column: 1/6;
}
.mdn-blog {
    grid-row: 2/3;
    grid-column: 1/4;
    margin: 75px 30px 0 20px;
}
.cont-art {
    grid-row: 2/3;
    grid-column: 4/6;
    margin: 75px 30px 87px 20px;
}
footer {
    grid-column: 1/6;
    grid-row: 3/4;
    display: grid;
    background-color: #1b1b1b;
    padding: 50px 0 70px 20px;
}

全部で5列と3行あります.
autoは内容物によって大きさを調整した.
グリッド実装
このようにするのはとても良い感じで、わざわざ大きさを調整する必要はありません
この場合、gridとflexを練習して、それらを上手に使う必要があります.(もちろん、フローティングもあります)🤣
📒今日学んだ!
📍反応型を体現するとともに、JSが未熟な場合に、ボタンの切り替えやクリックして画面が現れたり消えたりすることも学べます.

<input type="checkbox" id="expandable-input" class="checkbox">   
<label for="expandable-input" class="toggle_btn"></label>        
<ul class="nav-menu">
     <li><a href="#" class="decs">Technologies</a></li>
     <li><a href="#">References & Guides</a></li>
     <li><a href="#">Feedback</a></li>
</ul>

@media screen and (max-width: 740px) {
    .header .cont-menu .find-menu{
        display: none;
    }
    .header .cont-menu .nav-menu{
        max-height: 0px;
        overflow: hidden;
    }
    .header .cont-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header .cont-menu .mdn-logo {
        width: 170px;
    }
    .header .cont-menu .toggle_btn{
        display: block;
        background-image: url(./img/bars-solid.svg);
        width: 30px;
        height: 30px;
    }
    .checkbox:checked  + .toggle_btn + .nav-menu {
        max-height: 1000px;
        display: block;
        padding: 30px;
    }
    
}

コードはこうです.
まず、inputのtype=checkboxを選択し、labelとinputのidを関連付けます.labelのテキストまたは画像をクリックすると、チェックボックスを選択することもできます.
最初に、最大高さを0、over-flowをhiddenに設定し、チェックボックスをクリックして最大高さを大きくします.
これはコンテンツを表示する方法です.
この方法で、反応型でメニューが消えたときに、大切に使えます!
月曜日に戻ります!がんばってください!😁