Grid:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Gris in css</title>
<style>
.container{
display: grid;
/* isme pahile column ko 300px milenga aur age ke column ko 100px aur bacha 3rd column me auto ayenga .... saab jaga le lenga wo */
/* grid-template-columns: 300px 100px auto; */
/* same fr me bhi de sakte ho ..... 4fr matlab pahile se 4 guna kar denga wo */
/* grid-template-columns: 2fr 4fr 1fr; */
/* agar apko same layout ko .... 10 bar call karna hai .... to repeat function ka use kar sakte hai */
/* grid-template-columns: repeat(5,auto); */
/* rows me divide kardeta hai */
grid-template-rows: 2fr 1fr 4fr;
/* upperke 3 ko chode ke baki saab me 2 fr dikhenga */
grid-auto-rows: 2fr;
/* agar apko grid column me dikhana hai taab aap grid-column- kar sakte hai */
grid-template-columns: 2fr 3fr 4fr;
grid-gap: 3fr;
/* agar apko gris me gap dena hai aap wo bhi de sakte hai */
grid-gap: 7px;
}
.item{
border: 2px solid black;
background-color: yellow;
color: black;
margin: 5px;
padding: 7px ;
}
</style>
</head>
<body>
<div class="container">
<div class="item">This is grid item 1</div>
<div class="item">This is grid item 2</div>
<div class="item">This is grid item 3</div>
<div class="item">This is grid item 4</div>
<div class="item">This is grid item 5</div>
<div class="item">This is grid item 6</div>
<div class="item">This is grid item 7</div>
<div class="item">This is grid item 8</div>
<div class="item">This is grid item 9</div>
<div class="item">This is grid item 10</div>
<div class="item">This is grid item 11</div>
<div class="item">This is grid item 12</div>
<div class="item">This is grid item 13</div>
<div class="item">This is grid item 14</div>
<div class="item">This is grid item 15</div>
<div class="item">This is grid item 16</div>
<div class="item">This is grid item 17</div>
<div class="item">This is grid item 18</div>
<div class="item">This is grid item 19</div>
<div class="item">This is grid item 20</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.