DEV Community

SELVAKUMAR R
SELVAKUMAR R

Posted on

Building the second project Resume using HTML AND CSS

In this project i learned new concept called gird

Grid -> Networking Evenly space of Horizontol and vertical line to form the square and rectangle

Using the display CSS property to access the grid

display : grid

grid-template-columns: 1fr 2fr -> This command is used to align the div container in column

vh -> view port height this term used in height property in CSS

fr -> fractional unit or frame this term used in the grid template column property in css

Resume code:

<!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>
        .layout{
            border:1px solid red;
            height: 100vh;
            width: 70%;
            display: grid;
            grid-template-columns: 1fr 2fr;
        }

        body{
            display: flex;
            justify-content: center;
        }

    .left{
        border: 2px solid green;
        height: 300px;
    }

     .right{
        border: 2px solid green;
        height: 300px;
    }
    </style>
</head>
<body>
    <div class="layout">
        <div class="right"></div>
        <div class="left"></div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Keep waiting for new outcome keep coding and enjoy the outcome

Top comments (0)