grid-column-start
grid-column-end
grid-row-start
grid-row-end
<!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>css grid one</title>
</head>
<style>
.container{
display: grid;
grid-template-columns: 1fr 1fr 2fr;
grid-template-columns: repeat(1fr,auto);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.box{
background-color: red;
color: white;
padding: 30px;
border: 1px solid black;
/* margin: 1px; */
}
.box:first-child{
/* spanning two method 1st */
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 5; */
/* shotcut method */
grid-column: 1 / span 2;
grid-row: 1 / span 3;
}
</style>
<body>
<div class="container">
<div class="box">items-1</div>
<div class="box">items-2</div>
<div class="box">items-3</div>
<div class="box">items-4</div>
<div class="box">items-5</div>
<div class="box">items-6</div>
<div class="box">items-7</div>
<div class="box">items-8</div>
<div class="box">items-9</div>
<div class="box">items-10</div>
<div class="box">items-11</div>
<div class="box">items-12</div>
<div class="box">items-13</div>
<div class="box">items-14</div>
<div class="box">items-15</div>
<div class="box">items-16</div>
<div class="box">items-17</div>
<div class="box">items-18</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.