css
css grids

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <main>
<div class="div1">div1</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>

main{
width:90%;
margin:50px auto;
border: 1px solid black;
color: white;
display: grid;
/* ie 2 rows with 100 px and 150 px height */
/* grid-template-rows: 150px 150px; */
grid-template-rows: repeat(3,150px);

/* ie 3 columns with 150 px width and 3*2 is 6 */
/* 1 fr is the unit that can be used which automatically adjusts the width  */

/* grid-template-columns: 1fr 1fr 1fr; */
/* grid-template-columns:repeat(3,1fr); */

/* sets the column width to the length of the longest word */
/* grid-template-columns: min-content repeat(3,1fr); */

/* grid-template-columns: max-content repeat(3,1fr); */
/* occupies the entire width which is as long as the text */


/* grid-template-columns:minmax(150px,450px) repeat(3,1fr); */
/* it will set minimum width of 150px no matter what device it is. while max is what is shown on website */



/* @@extremely important */
grid-template-columns: repeat(auto-fit,minmax(400px, 600px));
row-gap: 20px;
column-gap: 20px;
/* gap: 20px; */
grid-auto-rows: 150px;
/* align-items: center; */
/* justify-items: center; */


}


.div1{
    background-color: red;
    border: 1px solid black;
}
.div2{
    background-color: rgb(59, 216, 221);
    border: 1px solid black;
    /* grid-column: 1/-1; */
}
.div3{
    background-color: rgb(102, 0, 255);
    border: 1px solid black;
}
.div4{
    background-color: rgb(255, 230, 0);
    border: 1px solid black;
}
.div5{
    background-color: rgb(255, 0, 183);
    border: 1px solid black;
    /* grid-row-start:1; */
    /* grid-column-start: 2; */
    /* grid-column-end: 4; */


    
    /* grid-row:1/2; */
    /* grid-column:2/4; */
}
.div6{
    background-color: rgb(30, 255, 0);
    border: 1px solid black;
}
Was this helpful?