grid تمرین

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    .container{
                        display: grid;
                        grid-template-areas: 'header header header' 'aside main main' 'footer footer footer';
                        height: 700px;
                    }

                    header{
                        grid-area: header;
                        background-color: blue;
                        height: 20%;
                    }
                    aside{
                        grid-area: aside;
                        background-color: brown;
                        height: 60%;
                    }
                    main{
                        grid-area: main;
                        background-color: blueviolet;
                        height: 60%;
                    }
                    footer{
                        grid-area: footer;
                        background-color: aqua;
                        height: 20%;
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div class="container"≫
                    ≪header≫Header≪/header≫
                    ≪aside≫Aside≪/aside≫
                    ≪main≫Main≪/main≫
                    ≪footer≫Footer≪/footer≫
                ≪/div≫
            ≪/body≫
            ≪/html≫
        
    

grid2 تمرین

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Grid≪/title≫
                ≪style≫
                    .container{
                        background-color: yellow;
                        display: grid;
                        grid-template-columns: 33% 33% 33%;
                        grid-template-rows: 50% 50%;
                        justify-content: space-between;
                        align-content: space-between;
                        height: 500px;
                    }
                    .grid-item{
                        background-color: orange;
                        border: solid;
                    }
                    .item-one{
                        background-color: blueviolet;
                        grid-column: 1 / 3;
                    }
                    .item-two{
                        background-color: black;
                        grid-area: 1 / 3 / 3 / 3;
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪div class="container"≫
                    ≪div class="grid-item item-one"≫1≪/div≫
                    ≪div class="grid-item item-two"≫2≪/div≫
                    ≪div class="grid-item"≫3≪/div≫
                    ≪div class="grid-item"≫4≪/div≫
                ≪/div≫
            ≪/body≫
            ≪/html≫
        
    

شرط با تغییر اندازه صفحه

        
            ≪!DOCTYPE html≫
            ≪html lang="en"≫
            ≪head≫
                ≪meta charset="UTF-8"≫
                ≪meta name="viewport" content="width=device-width, initial-scale=1.0"≫
                ≪title≫Document≪/title≫
                ≪style≫
                    p{
                        background-color: yellow;
                    }

                    @media only screen and (max-width : 600px){
                        p{
                            background-color: orange;
                        }
                    }
                ≪/style≫
            ≪/head≫
            ≪body≫
                ≪p≫Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt in fuga quibusdam sapiente suscipit, soluta inventore fugit ipsa! Qui perferendis quasi similique dolores expedita blanditiis adipisci explicabo officia sapiente dicta.≪/p≫
            ≪/body≫
            ≪/html≫