Html 5:
<!DOCTYPE html>
<html>
<head>
<title>Grid3</title>
<link rel="stylesheet" type="text/css" href="grid3.css">
</head>
<body>
<main>
<div class="grid1">Grid1</div>
<div class="grid2">Grid2</div>
<div class="grid3">Grid3</div>
<div class="grid4">Grid4</div>
</main>
</body>
</html>
CSS3 :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
width: 70%;
margin: 50px auto;
border: 1px solid black;
display: grid;
grid-template-rows: repeat(2, 250px);
grid-template-columns: repeat(3, 1fr);
color: white;
}
.grid1{
background-color: red;
grid-row: 1/-1;
/*background-image: url('p-coder.jpg');
background-size: 100% 100%;*/
}
.grid2{
background-color: yellow;
grid-column: 2/-1;
}
.grid3{
background-color: blue;
/*grid-column: 1/-1;*/
grid-column: 2/3;
}
.grid4{
background-color: green;
/*grid-column: 3/4;
grid-row: 1/2;*/
}
9/07/2020
Comments
Post a Comment