CSS Grid Layout 01 - Responsive Grid layout For Blog site

0

CSS Grid Layout - Responsive Grid layout For Blog site



Howdy from HTML Layout Lab! We're passionate about using HTML to build visually appealing and structured web layouts. You've come to the perfect place if you're a newbie hoping to learn the fundamentals or an expert developer looking for inspiration. The HTML layout of an engaging website must be visually appealing. It is possible to enhance the user experience and increase accessibility by using semantic HTML tags and a well-structured design. CSS can be used to add styling and make it look attractive. To ensure that your site appears ideal on all devices, this HTML layout is responsive. You have the option of changing or adding information to suit your preferences and needs. By carefully considering colours, fonts, and spacing, you can create a visually appealing layout that will attract the attention of your visitors and make your website stand out.

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 01 - Learningrobo.com</title> </head> <body> <div class="grid-container"> <div class="class1"> <h2><b>Header</b></h2> </div> <div class="class2"> <h2><b>Nav</b></h2> </div> <div class="class3"> <h2><b>Article</b></h2> </div> <div class="class4"> <h2><b>Ads</b></h2> </div> <div class="class5"> <h2><b>Footer</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:20% auto 10%;
    grid-template-rows:calc(30vh - 20px) 50vh calc(20vh - 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: 1/4;
    border-radius: 10px;
}
.class2{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-column:1/2;
    grid-row: 2/4;
    border-radius: 10px;
}
.class3{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    grid-column:2/3;
    border-radius: 10px;
}
.class4{
    display: flex;
    align-items:center;
    justify-content: center;
    background: var(--bg);
    text-align: center;
    border-radius: 10px;
}
.class5{
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    background: var(--bg);
    text-align: center;
    grid-column:2/4;
    border-radius: 10px;
}
@media only screen and (max-width: 860px){
    .grid-container{
        grid-template-columns: auto auto;
        grid-template-rows:calc(20vh - 20px) 60vh calc(20vh - 20px);
    }
    .class2{
        grid-column: 1/2;
        grid-row: 2/4;
    }
    .class3{
        grid-column: 2/4;
    }
    .class4{
        grid-column: 2/4;
    }
    .class5{
        grid-column: 1/4;
    }
}
@media only screen and (max-width: 600px){
    .grid-container{
        grid-template-columns: auto;
        grid-template-rows:20vh 10vh 40vh 10vh 20vh;
    }
    .class1{
        grid-column: 1/4;
    }
    .class2{
        grid-column: 1/4;
        grid-row: 2/3;
    }
    .class3{
        grid-column: 1/4;
    }
    .class4{
        grid-column: 1/4;
    }
    .class5{
        grid-column: 1/4;
    }
}

.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