☰

Unit IV - Grids - Lesson 1 - Part 2 | Codetantra HTML

Unit IV - Grids - Lesson 1 - Part 2 | Codetantra HTML

Unit IV - Grids - Lesson 1 - Part 2

### 5.1.10. align-items

    <!doctype html>
    <html>
        <head>
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div class="grid-item">One</div>
                <div class="grid-item">Two</div>
                <div class="grid-item">Three</div>
                <div class="grid-item">Four</div>
            </div>
        </body>
    </html>

    /* Write your code below */
    .grid-item {
        background-color: silver;
        border: 1px solid white;
        color: white;
    }
    .grid-container {
        display: grid;
        grid-template-rows: repeat(2,100px);
        grid-template-columns: repeat(2,100px);
        background-color: black;
        width: 250px;
        height: 250px;
        row-gap: 20px;
        column-gap: 20px;
        align-items: center;
    }

5.1.11. place-items

    <!doctype html>
    <html>
        <head>
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div class="grid-item">One</div>
                <div class="grid-item">Two</div>
                <div class="grid-item">Three</div>
                <div class="grid-item">Four</div>
            </div>
        </body>
    </html>

    /* Write your code below */
    .grid-item {
        background-color: red;
        border: 1px solid white;
        color: white;
    }
    .grid-container {
        display: grid;
        grid-template-rows: repeat(2,100px);
        grid-template-columns: repeat(2,100px);
        background-color: black;
        width: 250px;
        height: 250px;
        row-gap: 10px;
        column-gap: 20px;
        place-items: center;
    }

5.1.12. fr unit

    /* Write your code below */
    .grid-item {
        background-color: red;
        border: 1px solid white;
    }
    .grid-container1 {
        display: grid;
        height: 100px;
        grid-template-columns: 75% 25%;
        background-color: black;
        column-gap: 50px;
        border: 1px solid black;
    }
    .grid-container2 {
        display: grid;
        height: 100px;
        grid-template-columns: 3fr 1fr;
        background-color: black;
        column-gap: 50px;
        border: 1px solid black;
    }

5.1.13. min-content, max-content

    /* Write your code below */
    .grid-item {
        background-color: darkcyan;
        color: white;
        border: 1px solid white;
    }
    .grid-container1 {
        display: grid;
        height: 100px;
        grid-template-columns: min-content 1fr;
        background-color: black;
        column-gap: 50px;
        border: 1px solid black;
    }
    .grid-container2 {
        display: grid;
        height: 100px;
        grid-template-columns: max-content 1fr;
        background-color: black;
        column-gap: 50px;
        border: 1px solid black;
    }

5.1.14. fit-content()

    /* Write your code below */
    .grid-item {
        background-color: firebrick;
        border: 1px solid white;
    }
    .grid-container {
        display: grid;
        height: 100px;
        grid-template-columns: fit-content(100px) 1fr;
        column-gap: 50px;
        border: 1px solid black;
    }

5.1.15. min(), max(), minmax()

    /* Write your code below */
    .grid-item {
        background-color: royalblue;
        color: white;
        border: 1px solid white;
    }
    .grid-container {
        display: grid;
        height: 100px;
        grid-template-columns: min(50px) max(100px) minmax(50px, 1fr);
        column-gap: 50px;
        border: 1px solid black;
    }

5.1.16. repeat()

    /* Write your code below */
    .grid-item {
        background-color: chocolate;
        color: white;
        border: 1px solid white;
    }
    .grid-container {
        display: grid;
        height: 100px;
        grid-template-columns: repeat(3, 300px);
        column-gap: 50px;
    }

5.1.17. grid-row-start

    <!doctype html>
    <html>
        <head>
            <link href="hidden.css" rel="stylesheet" />
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div id="mouse"></div>
                <div id="cheese"></div>
            </div>
        </body>
    </html>

    .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
    }

    #mouse {
        /* Write your code below */
        grid-row-start: 3;
    }

5.1.18. grid-row-end

    <!doctype html>
    <html>
        <head>
            <link href="hidden.css" rel="stylesheet" />
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div class="mouse"></div>
                <div class="cheese"></div>
            </div>
        </body>
    </html>

    .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
    }

    .cheese {
        grid-row-start: 1;
        /* Write your code below */
        grid-row-end: 4
    }

5.1.19. grid-column-start

    <!doctype html>
    <html>
        <head>
            <link href="hidden.css" rel="stylesheet" />
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div id="mouse"></div>
                <div id="trap"></div>
            </div>
        </body>
    </html>

    .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
    }

    #mouse {
        /* Write your code below */
        grid-row-start: 3;
        grid-column-start: 4;
    }

5.1.20. grid-column-end

    <!doctype html>
    <html>
        <head>
            <link href="hidden.css" rel="stylesheet" />
            <link href="style.css" rel="stylesheet" />
        </head>
        <body>
            <!-- Write your code below -->
            <div class="grid-container">
                <div class="mouse"></div>
                <div class="trap"></div>
            </div>
        </body>
    </html>

    .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
    }

    .trap {
        grid-row-start: 3;
        /* Write your code below */
        grid-column-start: 1;
        grid-column-end: span 4
    }

5.1.21. grid-row & grid-column

    .cheese {
        /* Write your code below */
        grid-column: 2/5;
        grid-row: 1/5;
    }

5.1.22. grid-area

    .grid-container {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: 25% 25% 25% 25%;
    }
    /* Write your code below */
    .mouse {
        grid-area: 2 / 2 / 4 / 4;
    }
    .cheese {
        grid-area: 2 / 2 / 4 / 4;
    }

5.1.23. justify-self

    /* Write your code below */
    #mouse {
        grid-column-start: 4;
        justify-self: end;
    }

5.1.24. align-self

    /* Write your code below */
    #mouse {
        grid-row-start: 4;
        grid-column-start: 4;
        justify-self: end;
        align-self: end;
    }

5.1.25. place-self

    /* Write your code below */
    #mouse {
        grid-row-start: 4;
        grid-column-start: 1;
        place-self: center;
    }
1st Semester CodeTantra Unit IV - Grids - HTML