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; }
Your are gaeat man
ReplyDeletethanks for this video sir
ReplyDeleteThanks for sharing this valuable knowledge on CSS....Cheers
ReplyDeletehi 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
ReplyDeletethis 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
Really helpful video
ReplyDelete