How to create a layout using a CSS grid?

Grid is used to create the layout or structure of the website let’s take an example that you want to have tv,fridge and ac in your home but for that you need home so it’s like creating your house then you can put tv,fridge and ac. This can be created by understanding the row and column numbers concept in a grid, a grid is being created by making the display property of the element grid and all its child automatically becomes grid items. We can use the properties of the grid to create a layout like the given in the image below,

Now, let’s learn how to create this layout and start with the most important thing which is how to count the number of rows and columns you will get the idea from the image given below,

Now, let’s write some markup and create one div parent with a class named container with its seven div child with the class named box1,box2,…, up to box7 respectively and write something like header footer and sidebar accordingly to every child if you want it’s optional now let’s jump to the CSS part and reset the CSS by assigning values of margin and padding zero and box-sizing to border-box.

Let’s make the container grid by using the display: grid property and give some margin from left and right, for better visualization let’s add some background color to each child div now as shown in the image we need 4 rows and 4 columns in which size of the rows and columns are different which we will learn further how to do that now the O/P of all this thing is given below,

We will edit the size of all the rows and columns by using properties of the grid like grid-template-row and grid-template-column let’s start with giving size to each row using grid-template-rows in which the size of the head and footer will be of the same size, the main will be of the biggest size and then box section of size and sidebar as given in the image the code for that is shown below,

as we can see in the code, rows are sized which gives 70px to the first row 300px to the 2nd, and so on, now like this, we have gave a size to each column in which the first three columns are of the same size, here we have used repeat value which Represents a repeated fragment of the tracklist and ending with the last column having defined size, add some margin between this cells using grid-gap property, o/p of this will look like the image shown below, grid-gap:20px;

the head is in its position in a row we just need to expand it into a column so let’s use the grid-column property in div1 and give a 1/-1 value to it which will expand the head from the start of the column to the end of the column o/p image is shown below,

as we show the o/p of the head we will use grid-column and grid-row properties for each cell and make the final product using them
applying grid-column div2{main}:

we need to set the grid column as well as the grid row of div6{sidebar}:

as we can see in the last output all the cells are in their position now we will use the grid column for div7{footer} as we used in head
(grid-column: 1/-1) the final product will look like the image shown below,

HTML and CSS code of this project is given below which you can copy by clicking on copy button on top right, thankyou.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />    
<title>grid</title>    
<link rel="preconnect" href="https://fonts.googleapis.com" />    
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />    
<link href="https://fonts.googleapis.com/css2family=Cormorant+Garamond:[email protected]&display=swap" rel="stylesheet" />    
<style>      
* {        
margin: 0;        
padding: 0;        
box-sizing: border-box;        
color: white;      
}

.container {        
display: grid;        
width: 90%;        
margin: 50px auto;        
grid-template-rows: 70px 300px 180px 70px;        
grid-template-columns: repeat(3, 1fr) 150px;        
grid-gap: 20px;      
}
      
div {        
text-align: center;        
font-size: 20px;        
font-family: "Cormorant Garamond", serif;        
font-weight: 200;      
}
      
.div1 {        
background-color: navy;        
grid-column: 1/-1;      
}

.div2 {        
background-color: wheat;        
grid-column: 1/4;      
}
      
.div3 {        
background-color: black;      
}
      
.div4 {        
background-color: cadetblue;      
}
      
.div5 {        
background-color: yellow;      
}
      
.div6 {        
background-color: yellowgreen;        
grid-row: 2/4;        
grid-column: 4/5;      
}
      
.div7 {        
background-color: rebeccapurple;        
grid-column: 1/-1;      
}    
</style>  
</head>  
<body>    
<div class="container">      
<div class="div1">head</div>      
<div class="div2">main content</div>      
<div class="div3">box1</div>      
<div class="div4">box2</div>      
<div class="div5">box3</div>      
<div class="div6">sidebar</div>      
<div class="div7">footer</div>    
</div>  
</body>
</html>

19 thoughts on “How to create a layout using a CSS grid?”

  1. Magnificent goods from you, man. I’ve understand your stuff previous to
    and you are just too fantastic. I actually like what you have acquired here, certainly like
    what you’re stating and the way in which you say it.
    You make it entertaining and you still take care of to keep it smart.
    I can’t wait to read far more from you. This is actually a
    terrific web site.

    my homepage :: 토토사이트

  2. Howdy! Someone in my Myspace group shared this website with us so I
    came to check it out. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers!
    Great blog and amazing style and design.

    Feel free to visit my web blog: 먹튀검증업체

  3. I was curious if you ever considered changing the layout of your site?
    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of
    content so people could connect with it better. Youve got an awful lot of text
    for only having 1 or 2 images. Maybe you could space it out better?

    My blog – 구글상위노출교육

  4. Hmm it seems like your site ate my first comment (it was extremely long) so I guess I’ll just sum it
    up what I submitted and say, I’m thoroughly enjoying
    your blog. I as well am an aspiring blog writer but I’m still new to everything.
    Do you have any tips for inexperienced blog writers?

    I’d definitely appreciate it.

    My blog: fx마진거래

    1. I am also a newbie in this area and I observe other blogs take inspiration and chose my own topic and then write a blog in which I had difficulties understanding, thanks.

  5. Just desire to say your article is as astonishing.

    The clarity in your post is simply nice and i could assume you are an expert
    on this subject. Fine with your permission let
    me to grab your RSS feed to keep up to date
    with forthcoming post. Thanks a million and please keep up the rewarding
    work.

    Also visit my site … 토토커뮤니티

  6. I know this if off topic but I’m looking into starting my own weblog and was curious what all is required to get setup?
    I’m assuming having a blog like yours would cost a pretty penny?

    I’m not very internet smart so I’m not 100% certain. Any tips or advice would be greatly appreciated.
    Thank you

    My site 메이저사이트

    1. no is not so costly as student it is affordable for me you should get some coupon code for the domain and hosting is already cheap so that’s it if you want any code contact me.

Leave a Comment

Your email address will not be published.

Scroll to Top