Responsive Layout with CSS Grid html css

How to Build a Simple Responsive Layout with CSS Grid

How to Build a Simple Responsive Layout with CSS Grid

In this tutorial, you will learn how to create a Simple Responsive Layout with CSS Grid. Currently, Responsive Word is very important for any website. Different websites have different types of structures. Some websites are made up of two-column websites. However, CSS Grid makes this task much easier.

CSS Grid arranges the columns of the website according to the screen size of the device. Here I have created a Responsive Layout using CSS Grid. I have given here an example and the necessary source code. You can create a Responsive Layout using that source code using CSS Grid.

The most important point here is that the layouts I have used are of different sizes. Each is made of a different size. Here the contents are arranged using three columns. However, in the case of responsive devices, it can be seen in a column.

Simple Responsive Layout with CSS Grid

I have not shared any tutorial on this design. I have given only the source code here. I used HTML and CSS to make it. Using some amount of HTML, I have created the layouts in it and with the help of CSS, I have made them in design and response.

See the Pen
CSS Grid Template by Foolish Developer (@foolishdevweb)
on CodePen.

Hopefully by watching the demo above you understand how this Simple Responsive Layout works. Any website or element is very important because the number of mobile users is many times more than the number of desktop users.

Below I have provided HTML and CSS codes that you can copy and use for any purpose. Create an HTML and CSS file if you want to make it. Hope you know how to create HTML and CSS files.

Step 1: HTML code of Responsive Layout

10 boxes have been created using the following HTML codes. You copy these codes and paste them into your HTML file.

<div class=”container”>
  <div class=”item item-1″>1</div>
  <div class=”item item-2″>2</div>
  <div class=”item item-3″>3</div>
  <div class=”item item-4″>4</div>
  <div class=”item item-5″>5</div>
  <div class=”item item-6″>6</div>
  <div class=”item item-7″>7</div>
  <div class=”item item-8″>8</div>
  <div class=”item item-9″>9</div>
  <div class=”item item-10″>10</div>
</div>

Step 2: Make the layouts responsive with CSS Grid

Now it’s time to design it with CSS code. Copy the following code and add it to your CSS file. Be sure to attach your CSS file to the HTML file.

html,body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    padding: 10px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: repeat(6 , 250px);
    grid-gap: 10px 10px;
}
.item{
    background-color: lightblue;
    font-size: 50px;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-family: ‘Righteous’, cursive;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 
0 1px 10px 0 rgba(0,0,0,0.12), 
0 2px 4px -1px rgba(0,0,0,0.3);
}
.item-1{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    background-color: #e91e63;
}
.item-2{
    grid-column: 3 / 5;
    grid-row: 1 / 2;
    background-color: #ff9800;
}
.item-3{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    background-color: #ab47bc;
}
.item-4{
    grid-column: 4 / 5;
    grid-row: 2 / 3;
    background-color: #546e7a;
}
.item-5{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    background-color: #6a6a6a;
}
.item-6{
    grid-column: 2 / 3;
    grid-row: 3 / 5;
    background-color: #38cf44;
}
.item-7{
    grid-column: 3 / 5;
    grid-row: 3 / 6;
    background-color: #2196f3;
}
.item-8{
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    background-color: #4a148c;
}
.item-9{
    grid-column: 1 / 3;
    grid-row: 5 / 6;
    background-color: #6d4c41;
}
.item-10{
    grid-column: 1 / 5;
    grid-row: 6 / 7;
    background-color: #e83835;
}
/* For Responsive Device */
@media screen and (max-width: 768px){
    .container{
        display: block;
    }
    .item{
        height: 200px;
        margin-bottom: 10px;
    }
}

Hopefully, with the help of the above code, you understand how this Responsive Layout with CSS Grid has been created. Copy the codes above and add them to your HTML and CSS files. If there is any difficulty in copying and assembling the codes, you can take the help of the download button below.

 You can take the help of the demo section above to know how it works in the case of Responsive Devices. You can use the download button below to download the source code required to create this (Responsive Layout with CSS Grid).