css grid 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css grid</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 4fr);
/* grid-template-rows: repeat(8, 1fr); */
grid-template-rows: 2fr 4fr 2fr;
/* grid-column-gap: 1rem ;
grid-row-gap: 2rem; */
grid-gap: 1rem;
}
.box {
background-color: rgb(236, 214, 15);
border: 2px solid red;
padding: 20px;
}
.box:first-child{
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3; */
}
.box:nth-child(4){
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 9;
background-color: rgb(247, 25, 25); */
}
/* .box:nth-child(11){
grid-row-start: 9;
grid-row-end: 11;
grid-column-start: 1;
grid-column-end: 3;
background-color: rgb(44, 219, 28);
} */
.box:nth-child(5){
grid-row: 5 / span 9;
grid-column: 3/ span 3;
background-color: rgb(216, 15, 235);
}
</style>
</head>
<body>
<div class="container">
<div class="box">item-1</div>
<div class="box">item-2</div>
<div class="box">item-3</div>
<div class="box">item-4</div>
<div class="box">item-5</div>
<div class="box">item-6</div>
<div class="box">item-7</div>
<div class="box">item-8</div>
<div class="box">item-9</div>
<div class="box">item-10</div>
<div class="box">item-11</div>
<div class="box">item-12</div>
<div class="box">item-13</div>
<div class="box">item-14</div>
</div>
</body>
</html>
Comments
Post a Comment