CSS Grid Layout
<!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>Calculator Project</title>
<style>
.grid-container{
display: grid;
grid-template-columns: auto auto auto auto; /* চারটা column এর জন্য চার টা auto নেয়া হয়েছে*/
/* grid-template-rows: 50px 40px 70px; */ /*প্রতিটি row এর মধ্যে সাইজ দেওয়া জন্য এই প্রপাটি ব্যবহার করা যায়।*/
/* grid-column-gap: 10px;
grid-row-gap: 10px; */
/* grid-gap: 10px 20px; */ /*গ্রিড কলাম এবং রো এর বাইরে গ্যাপ তৈরী করার জন্য ব্যবহার করা যাবে।*/
/* justify-content: center; */ /*start এবং end Value ব্যবহার করা যায়।*/
/* align-content: center; */ /*start এবং end Value ব্যবহার করা যায়।*/
}
.grid-container > div{
background-color: rgb(221, 169, 0);
border: 1px solid black;
padding: 10px;
text-align: center;
font-weight: bold;
}
.items-1{
/* grid-column-start: 1;
grid-column-end: 4; */ /*গ্রিড কলামের ভিতরে নির্দিষ্ট করে জায়গা নেওয়ার জন্য ব্যবহার করা হয়। */
/* grid-column: 1 / 4; */ /* এক থেকে চার পর্যন্ত কলাম জায়াগা নিবে*/
/* grid-column: 1 / span 4; */ /* এক থেকে চার পর্যন্ত কলাম স্পান করবে বা সড়ে যাবে*/
}
</style>
</head>
<body>
<div class="grid-container">
<div class="items-1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<div>16</div>
</div>
</body>
</html>
Answer
