Grid
app.component.html: -
<!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">
<title>Grid Tutorial</title>
</head>
<body>
<div class="container">
<div class="item item1"></div>
<div class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. ...</div>
<div class="item"></div>
<div class="item"></div>
<div class="item footer"></div>
</div>
</body>
</html>
-------------------------------------------
app.component.css:
*{
margin: 0;
padding: 0;
}
.container{
background-color: red;
height: 700px;
display: grid;
row-gap: 0px;
column-gap: 12px;
/* grid-template-rows: 133px 133px 133px;
grid-template-columns: 133px 133px 133px; */
/* grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr); */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:50px 1fr 100px;
}
.item{
background-color: aqua;
border: 1px solid black;
}
.item1{
grid-column-start: 1;
grid-column-end: 4;
}
.footer{
grid-column-start: 1;
grid-column-end: 4;
}
--------------------------------------
Output: -
Comments
Post a Comment