Revamp Your Website with Ease: Find the Perfect CSS Grid Layout Template 02

0

Revamp Your Website with Ease: Find the Perfect CSS Grid Layout Template 02





Howdy from HTML Layout Lab! We are passionate about using HTML to create organised and aesthetically pleasing website layouts. If you're a beginner trying to learn the basics or an experienced developer seeking inspiration, you've come to the right place. An engaging website must have a visually appealing HTML layout. Using semantic HTML tags and a well-structured design can improve the user experience and increase accessibility. It may be styled and made to seem appealing with CSS. This HTML theme is responsive, so your site will look great on all devices. You can modify or add information to meet your choices and requirements. You may develop a visually appealing layout that will attract the attention of your visitors and make your website stand out by carefully considering colours, typefaces, and space.

How to create a Responsive Grid Layout with HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta name="keywords" content="grid"> <meta name="description" content="grid"> <meta name="author" content="grid"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>GRID Layout 02 Learningrobo.com</title> </head> <body> <div class="grid-container"> <div class="class1"> <h2><b>Nav</b></h2> </div> <div class="class2"> <h2><b>Sidebar</b></h2> </div> <div class="class3"> <h2><b>Main</b></h2> </div> <div class="class4"> <h2><b>Sidebar</b></h2> </div> <div class="class5"> <h2><b>Section</b></h2> </div> <div class="class6"> <h2><b>Section</b></h2> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 



@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
:root{
    --bg:#ffffff;
}
body{
    margin:0%;
    font-family: 'Righteous', cursive;
}
.grid-container{
    display:grid;
    grid-template-columns:15% calc(32.5% - 15px) calc(32.5% - 15px) 20%;
    grid-template-rows:calc(20vh - 20px) 50vh calc(30vh - 20px);
    gap:10px;
    background: #00ACEF;
    background: -webkit-linear-gradient(to right, #00ACEF, #3F62D6);
    background: linear-gradient(to right, #00ACEF, #3F62D6);
    padding:10px;
}
.class1{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-column: 2/5;
    border-radius: 10px;
}
.class2{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-row: 1/4;
    grid-column: 1/2;
    border-radius: 10px;
}
.class3{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-column:2/4;
    border-radius: 10px;
}
.class4{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-column:4/5;
    grid-row:2/4;
    border-radius: 10px;
}
.class5{
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    background: var(--bg);
    text-align: center;
    grid-column:2/3;
    border-radius: 10px;
}
.class6{
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    background: var(--bg);
    text-align: center;
    grid-column:3/4;
    border-radius: 10px;
}
@media only screen and (max-width: 860px){
    .grid-container{
        grid-template-columns: 15% 28% 28% 25%;
        grid-template-rows:calc(20vh - 20px) 60vh calc(20vh - 20px);
    }
}
@media only screen and (max-width: 600px){
    .grid-container{
        grid-template-columns: auto;
        grid-template-rows:15vh 10vh 35vh 10vh 15vh 15vh;
    }
    .class1{
        grid-column: 1/4;
        border-radius: 10px;
    }
    .class2{
        grid-column: 1/4;
        grid-row:2/3;
        border-radius: 10px;
    }
    .class3{
        grid-column: 1/4;
        border-radius: 10px;
    }
    .class4{
        grid-column: 1/4;
        grid-row:4/5;
        border-radius: 10px;
    }
    .class5{
        grid-column: 1/4;
        border-radius: 10px;
    }
    .class6{
        grid-column: 1/4;
        border-radius: 10px;
    }
}
.credit a{
    text-decoration:none;
    color: #000;
    font-weight: 600;
}
.credit {
    color:#000;
}
We hope you would like this Responsive CSS Grid Layout with HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive CSS Grid Layout with HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome