THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

Complete CSS GRID Tutorial In ONE VIDEO In HINDI 2019

Complete CSS GRID Tutorial In ONE VIDEO In HINDI 2019



Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.


 HTML Codes


<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylegrid.css">
</head>
<body>

<main>
<div class="div1"> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </div>
<div class="div2"> div2 </div>
<div class="div3"> div3 </div>
<div class="div4"> div4 </div>
<div class="div5"> div5 </div>
<div class="div6"> div6 </div>

</main>

</body>

</html>



CSS Codes: 


*{ margin: 0; padding: 0; }
main{
width: 90%;
margin: 50px auto;
border:1px solid black;
color: white;
display: grid;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
/*grid-row-gap: 20px;*/
/*grid-column-gap: 20px;*/
grid-gap: 20px;
grid-auto-rows: 150px;
/*align-items: center;*/
/*justify-content: center;*/
/*justify-items:center; start/end/strech*/
}

.div1{ background: red; }
.div2{ background: blue;
/*grid-column: 1/ -1;*/
 }
.div3{ background: green; }
.div4{ background: yellow; }
.div5{ background: orange;
/*grid-row-start: 1; grid-row-end:2;*/
/*grid-row: 1/2;*/
/*grid-column-start: 2; grid-column-end: 4;*/
/*grid-column: 2/4;*/

}

.div6{ background: black; }




5 comments:

  1. Thanks for sharing this valuable knowledge on CSS....Cheers

    ReplyDelete
  2. hi I am a web accessibility tester I find some issue on this page that is for link there is a missing descriptive link name for 6 link below the share this:I think that is social media link provide descriptive link name
    this will create problem to screnreader user mins the are not able to what is for that link becose the don't have vision and I am also blind I hope you will understand what I want to say thank you

    ReplyDelete